Question

您好我为我的网站创建了一个共享部分，这些社交网络链接隐藏在文档的开头。

但是当我在取消隐藏我的共享链接时尝试单击这些链接时，链接不会导航到任何地方，如果我右键单击并单击在新选项卡中打开它可以正常工作。

我的代码位于下方或查看jsFiddle

<ul class="nav">
    <li><a href="http://www.google.com" target="_blank" id="open">Info</a>
    </li>
    <li class="share"><a href="#" id="share">Share</a>
    </li>
</ul>

<ul class="sharenav">
    <li><a href="https://www.facebook.com/sharer/sharer.php?u=index.html" target="_blank">FB</a>
    </li>
    <li><a href="http://www.google.com" target="_blank">Twitter</a>
    </li>
    <li><a href="#">G+</a>
    </li>
    <li><a href="#">LinkedIn</a>
    </li>
</ul>

JS / js.js

$('.sharenav').hide();

$('.share').on('click', function () {
    $('.sharenav').slideDown('slow');
});

$('.share').mouseleave(function () {
    $('.sharenav').slideUp('slow');
});
$('.sharenav').on('click', function () {
    $(this).stop();
    return false;
});
$('.sharenav').mouseleave(function () {
    $(this).slideUp('slow');;
});

Answer 1

这段代码是什么？

$('.sharenav').on('click', function () {
    $(this).stop();
    return false;
});

有了这个，当你点击一个链接时，它首先会看到你点击了运行这个事件监听器的.sharenav（ul容器）的事实。

此事件侦听器返回false，因此不再执行任何事件（在这种情况下，单击链接）。

尝试从中删除此代码块或return false;。

我已经整理了你的代码，所以现在悬停效果暂停了。当你离开父元素时，子容器仍然保留在原来的位置。希望如果你想要的话，这将对你有所帮助：

http://jsfiddle.net/JjQWL/

Answer 2

$('.sharenav').on('click', function () {
    $(this).stop();
    return false; // this stops the navigation.
});

Answer 3

链接无法正常工作，因为您实际上已停止使用以下行执行链接：

$('.sharenav').on('click', function () {
    $(this).stop();
    return false;
});

这是另一种解决方案（将点击处理程序仅过滤到li，允许a按预期执行）：

$('li.sharenav').on('click', function () {
    $(this).stop();
    return false;
});

jQuery show hide禁用目标属性

3 个答案: