Question

我在点击div时尝试显示li，并在点击其他li时隐藏它。问题是，当我点击最后一个li时会出现奇怪的效果。

我是jQuery的新手，所以我确信我的一些代码逻辑没有意义。

$('.btn').click(function(c){
      c.preventDefault();
      var a = $(this).attr("id").replace('title_', '');
      $(this).closest("#elements").find('.btn').removeClass("current");
      $(this).closest('li').addClass("current");
      $("#elements").find('.details').fadeOut("slow", function(){
          $('.btn-group').find('#details_' + a).fadeIn("fast");
      });
});


<div class="row">
 <div class="span8 center">
  <ul id="elements" class="ui-sortable">

   <li id="element_10" class="">
     <div class="btn-group">
       <button id="title_10" type="button" class="btn">
         lorem 10</button>
       <div style="display: none;" id="details_10" class="details">
         lorem ipsum 10
       </div>               
     </div>
   </li>

   <li id="element_11" class="">
      <div class="btn-group">
       <button id="title_11" type="button" class="btn">
            foo 11</button>
       <div style="display: none;" id="details_11" class="details">
            foo bar 11
       </div>               
      </div>
   </li>

...等

Answer 1

这可行 - 可能想调整时间。

这里我使用当前的类来确保我一次只处理一个项目。

http://jsfiddle.net/cewFL/

$('.btn').click(function(c){
      c.preventDefault();
      $(this).attr("id").replace('title_', '');
      $(".current .details").fadeOut("fast");
      $(".current").removeClass("current");
      $(this).closest('li').addClass("current");
      $(".current .details").fadeIn("fast");

});

对jquery的奇怪影响我淡出

1 个答案: