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 に答える