jQuery的悬停功能，通过点击平板电脑上(Jquery hover function and cl

我有一个使用导航列表切换出的幻灯片图像的jQuery的幻灯片。它的工作原理是，当你将鼠标悬停在导航列表它突出（“主动”）和相关的图像切换到这一点。有也可点击去到不同的页面导航列表中的链接。

我需要这在平板电脑上运行，这样当人水龙头的导航列表中，它被激活，则图像幻灯片切换，然后如果你再次点击它遵循通过该链接。眼下正在发生的事情是，一旦你点击它，它变得活跃和点击通过。

这里是jQuery的

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active'); 
$(".image_thumb ul li").hover(function(e){ 
    //Set Variables
    e.preventDefault();

    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
    var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
    var imgDesc = $(this).find('.block').html();    //Get HTML of block
    var imgDescHeight = $(".main_image").find('.block').height();   //Calculate height of block 
    if ($(this).is(".active")) {  //If it's already active, then...
        return false; // Don't click through
    } else {
        //Animate the Teaser                
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
        $(".main_image .block").html(imgDesc).animate({ opacity: 0.8,   marginBottom: "0" }, 250 );
        $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
    }

    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;
    });

下面是为导航列表中的HTML

<div class="image_thumb">
    <ul>
        <li id="one">

            <h2><a href="styleguide.html">Text Text Text</a></h2>
            <p><a href="styleguide.html">Text Text Text</a></p>

            <a class="imgloc" href="content/images/home/01.jpg"></a>

            <div class="block">
                 <p>Text Text Text</p>
            </div>

        </li>
    </ul>
</div>

这里是它如何工作的例子： ocgoodwill.org

如果有人能够帮助这将是伟大的！

- 编辑 -

我也想补充一点，如果用户已经聘请到的要素之一，然后敲击不同的一个，第一个需要重置，这样，如果他们点击返回到它，它不会自动点击。

Answer 1:

更新：最近诉诸再次使用这个脚本后，我意识到事情可以做了很多更简单，不需要任何标志都没有。

看到我的网站修改后的代码。

原来的答案：

今天有完全相同的问题。我解决了它使用的数据属性，现场绑定到touchstart事件（这是最基本的触摸的设备检查，但你可以让这个更彻底）。请尝试使用下面的代码，替换“clickable_element”来满足您的需求。

$('clickable_element').live("touchstart",function(e){
    if ($(this).data('clicked_once')) {
        // element has been tapped (hovered), reset 'clicked_once' data flag and return true
        $(this).data('clicked_once', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data('clicked_once', true);
    }
});

这应该从启动的第一次敲击的链接，激活它的第二次敲击停止平板电脑。

编辑：在多个链接元件，其必须的情况下，“复位”时被点击的其他元件中的一个，尝试该数据属性附加到父容器：

该HTML：

<div id="parent-element">
    <a href="" id="1">Link 1</a>
    <a href="" id="2">Link 2</a>
    <a href="" id="3">Link 3</a>
</div>

jQuery的：

$('#parent-element a').live("touchstart",function(e){
    var $link_id = $(this).attr('id');
    if ($(this).parent().data('clicked') == $link_id) {
        // element has been tapped (hovered), reset 'clicked' data flag on parent element and return true (activates link)
        $(this).parent().data('clicked', null);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked' data flag on parent element to id of clicked link, and prevent click
        e.preventDefault(); // return false; on the end of this else statement would do the same
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. I do suggest adding a class with addClass, as this is much more reliable.
        $(this).parent().data('clicked', $link_id);
    }
});

Answer 2:

我希望我能回复原来的职位，但重置“clicked_once”状态，你应该能够使用该位从原来的代码

$(".image_thumb ul li").removeClass('clicked_once');

（或类似的东西）在c_kick代码else语句的开始。

文章来源: Jquery hover function and click through on tablet