2

div の配列を表示しているプロジェクトがあります。divをクリックすると、インデックス値が0、1、2、...naのドロップダウンメニューがクリックされたdivから表示されます。現在、div をクリックするとドロップダウンが表示され、div に含まれる画像が (+) から (-) の画像に変化するように設定されているため、div が開かれていることが示されます。応答をコーディングしたので、クリックされた div のインデックス値がわかり、これを , で表示します<span>(これは、デバッグ中にインデックス値を確認するのに役立ちます)。div をクリックすると、画像が適切に変化します。 div、しかし問題は、どのdivをクリックしても、インデックス値（0）のdivだけがドロップダウンしてメニューを表示することです。クリックして画像を変更し（機能している）、メニューを表示する（インデックス（0）を除いて壊れている）divが必要です。

CSS

   .hidden { display: none; }

HTML

   <div class="geolink-bar">
       <div id="arrow">
           <img src="https://geoto.s3.amazonaws.com/images/arrow_down.png">
       </div>
   </div>
   <div id="dropdown-mobile-account" class="hidden">
       <div>Display after geolink-bar is clicked</div>
   </div>
   <span></span>

脚本

   $(document).ready( function() {
       $('.geolink-bar').click(function(){
           var index = $('.geolink-bar').index(this);
           $("span").text("That was div index #" + index);//DISPLAYS INDEX NUMBER F DIV CLICKED     
           $('#dropdown-mobile-account').slideToggle("slow");
           $(this).html(function(i,html) {
              if (html.indexOf('Show') != -1 ){
                  html = html.replace('Show','Hide');
              } else {
              html = html.replace('Hide','Show');
              }
              return html;
           }).find('img').attr('src',function(i,src){
           return (src.indexOf('arrow_down.png') != -1)? 'https://geoto.s3.amazonaws.com/images/arrow_open.png' :'https://geoto.s3.amazonaws.com/images/arrow_down.png';
           });
       }); 
   });
4

2 に答える 2

1

jsBin デモ

CSS:

.dropdown-mobile-account{
    display:none;
}

HTML:

   <div class="geolink-bar">
     <span class="tog-txt">Show</span>
       <div class="arrow">
           <img src="https://geoto.s3.amazonaws.com/images/arrow_down.png">
       </div>
   </div>
   <div class="dropdown-mobile-account">
       <div>Display after geolink-bar is clicked</div>
   </div>

jQuery:

$('.geolink-bar').click(function() {
    
      var visible = $(this).next('.dropdown-mobile-account').is(':visible'),
         slideTog = visible?'slideUp':'slideDown',
              txt = visible?'Show':'Hide',
           arrUrl = ['https://geoto.s3.amazonaws.com/images/arrow_down.png', 'https://geoto.s3.amazonaws.com/images/arrow_open.png'],
            arrow = visible? arrUrl[0] : arrUrl[1];
       
      $('.dropdown-mobile-account').slideUp();
      $('span.tog-txt').text('Show');
      $('.arrow').find('img').attr('src', arrUrl[0] );
      
      $(this).find('span.tog-txt').text( txt ).end().find('img').attr('src', arrow).end().next('.dropdown-mobile-account')[slideTog]();

});
于 2012-11-07T21:24:03.200 に答える
0

「nnnnnn」のコメントのおかげで、私は自分の

    $('#dropdown-mobile-account').slideToggle("slow");

と

    $(this).next().slideToggle("slow");

「RoXon の」例は、@ を参照するのに非常に適したデモです。:-)

于 2012-11-07T23:15:27.480 に答える