Question

我是jquery的新手，我可能会使用其他功能来实现这一目标，请告诉我。

我有一个下拉框，通过切换下拉，但是当点击下拉框时，它会淡出。这不会发生，因为下拉列表中有链接。

这是一个jsfiddle所以请看一下，看看我做错了什么。

HTML：

<span id="profile">
        <span id="profileDrop">
          <div id="triangleUp"></div>
          <div id="profileDown">
           <a href="../likes.php"><div id="profileElement"><img src="files/images/heart.png" height="12px" border="0"><d> Your Favourites</d></div></a>
           <a href="../tracks.php"><div id="profileElement"><img src="files/images/settings.png" height="12px" border="0"><d> Settings</d></div></a>
           <a href="../phpscripts/logout.php"><div id="profileElement"><img src="files/images/logout.png" height="12px" border="0" /><d> Logout</d></div></a>
          </div>  
        </span>
      </span>

jQuery：

$('#profile').toggle(function(){

        $('#profileDown', '#profile').fadeIn(300);
        $('#triangleUp', '#profile').fadeIn(300);
    }, function(){

        $('#profileDown', this).fadeOut(300);
        $('#triangleUp', '#profile').fadeOut(300);
});

Answer 1

尝试添加：

$('#profile a').click(function(e) {
    e.stopPropagation();
});

这将阻止点击事件从您的链接传播并触发淡入淡出。

<强> jsFiddle example

Answer 2

因为它位于#profile元素内部，所以它会冒泡到父元素并切换并最终消失。

尝试

    $('#profile').toggle(function(){
        $('#profileDown', '#profile').fadeIn(300);
        $('#triangleUp', '#profile').fadeIn(300);
        return false;
    }, function(){

        $('#profileDown', this).fadeOut(300);
        $('#triangleUp', '#profile').fadeOut(300);
        return false;
    });

Answer 3

我不确定你到底在找什么，但这http://jsfiddle.net/K3GpR/5/能达到你想要的目的吗？

基本上我所做的就是将你的下拉菜单拉出你附加切换的范围。

<span id="profile">
   <span id="profileDrop">
       <div id="triangleUp"></div>
   </span>
</span>
<div id="profileDown">
     <a href="../likes.php"><div id="profileElement"><img src="files/images/heart.png" height="12px" border="0">Your Favourites</div></a>
     <a href="../tracks.php"><div id="profileElement"><img src="files/images/settings.png" height="12px" border="0">Settings</div></a>
     <a href="../phpscripts/logout.php"><div id="profileElement"><img src="files/images/logout.png" height="12px" border="0" />Logout</div></a>
</div>

即使单击了放置菜单，此嵌套也会导致切换事件触发。现在只是图像触发切换。（我也改变了你的选择器。只是个人喜好。）

这是更新的js：

$('#profile').toggle(function(){

        $('#profileDown').fadeIn(300);
        $('#triangleUp').fadeIn(300);
    }, function(){

        $('#profileDown').fadeOut(300);
        $('#triangleUp').fadeOut(300);

    });

单击引用的div时停止jquery切换

3 个答案: