2

我有一个项目，我在其中显示一组 div。当我单击一个 div 时，无论是 0、1、2、...的索引值，都会从单击的 div 中显示下拉菜单。我目前已将其设置为单击 div 时下拉显示的位置，并且 div 中包含的图像将更改（例如 (+) 到 (-) 图像），从而表明 div 已打开。我已经编写了一个响应，所以我知道单击的 div 的索引值，并将其显示在 a<span>中（这只是为了帮助我在调试时查看索引值。）当我单击 div 时，图像将在适当的div，但问题是无论我单击什么 div，索引值（0）处的 div 是唯一一个下拉显示我的菜单的 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>

脚本

   $(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's”的例子是一个很好的演示，也可以看看@。:-)

于 2012-11-07T23:15:27.480 回答