0

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

这是我的代码的外观：http: //jsfiddle.net/zxGqV/4/

我是 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>

... ETC

4

1 回答 1

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");

});
于 2013-04-06T20:30:15.863 回答