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

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>​

j查询：

$('#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();
});​

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

js小提琴示例

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);
    });​