jQuery在单击索引值时切换DIV并在单击的DIV索引处更改图像

I have a project where I am displaying an array of divs. When I click a div, be it index value of 0,1,2,...n a drop down menu will display from the clicked div. I have it currently set up to where when the div is clicked the drop down displays and the image contained in the div will change(like a (+) to a (-) image for example), thus indicating that the div is opened. I have coded a response so I know the index value of the clicked div and I display this in a <span>, (this is just to help me see the index value while I debug.) When I click the div the image will change in the appropriate div, but The problem is no matter what div I click, the div at index value(0) is the only one that drop downs to display my menu. I want the div that is clicked to change the image(working) and also display the menu(broken, except on index(0).

我有一个项目,我正在显示一个div数组。当我单击一个div时,它的索引值为0,1,2,... n将从单击的div中显示一个下拉菜单。我当前设置为当点击div时显示下拉列表并且div中包含的图像将改变(例如,如(+)到( - )图像),从而指示div被打开。我已经编码了一个响应,所以我知道点击的div的索引值,我在中显示它(这只是为了帮助我在调试时看到索引值。)当我单击div时,图像将会改变在适当的div中,但问题是无论我点击什么div,索引值(0)的div是唯一一个显示我的菜单的下拉菜单。我希望单击的div更改图像(工作)并显示菜单(损坏,索引(0)除外)。

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>

SCRIPT

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

2 个解决方案

#1

jsBin demo

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]();

}); 

#2

Thanks to "nnnnnn's" comment, I replaced my

感谢“nnnnnn”的评论,我取代了我的

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

with

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

"RoXon's" example is a very good demo to take a look @ as well. :-)

“RoXon”的例子是一个非常好的演示来看看@。 :-)