0

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

3 回答 3

4

尝试添加：

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

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

jsFiddle 示例

于 2012-08-08T21:28:38.273 回答
0

因为它在#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;
    });​
于 2012-08-08T21:30:36.700 回答
0

我不确定您到底在寻找什么，但是这个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);

    });​
于 2012-08-08T21:36:00.320 回答