jQuery不能滑动切换我的单独的div正确的单个按钮

问题描述：

我试图让我的隐藏的描述div打开并关闭按下按钮，但是，我要将它应用到一个更大的项目， div会动态生成（由Django），所以我避免使用特定的ID和类。但是，当我按下一个按钮时，所有描述都会打开，而不是我点击的一个元素。对不起，如果这是措辞不佳，但我的codepen链接显示你我所得到的。jQuery不能滑动切换我的单独的div正确的单个按钮

HTML：

<html> 
<head> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"> 
    </head> 
<body> 

<div id="list"> 
    <div class="item"> 

    <div class="item-name"> 
    <p> This is an item name </p> 
    </div> 

    <div class="buttons"> 
     <div class="down-info"> 
     <button id="down-btn" class="btn dropdown-toggle"> 
      <i class="icon-chevron-down"></i> 
     </button> 
     </div> 

     <div class="delete-item"> 
     <button class="btn dropdown-toggle"> 
      <i class="icon-trash"></i> 
     </button> 
     </div> 

     <div class="check-item"> 
<button class="btn dropdown-toggle"> 
<i class="icon-ok"></i> 
</button> 
</div> 
</div> 
<div class="description"> 
<p>This is an item description, I'm wondering how much space I can occupy here before everthing looks too cluttered.</p> 
</div> 
</div> 

    <div class="item"> 
     <div class="item-name"> 
     <p> This is an item name </p> 
     </div> 
     <div class="buttons"> 
     <div class="down-info"> 
      <button id="down-btn" class="btn dropdown-toggle"> 
      <i class="icon-chevron-down"></i> 
      </button> 
     </div> 
     <div class="delete-item"> 
      <button class="btn dropdown-toggle"> 
      <i class="icon-trash"></i> 
      </button> 
     </div> 
     <div class="check-item"> 
      <button class="btn dropdown-toggle"> 
      <i class="icon-ok"></i> 
      </button> 
     </div> 
     </div> 
     <div class="description"> 
     <p>This is an item description, I'm wondering how much space I can occupy here before everthing looks too cluttered.</p> 
     </div> 
    </div> 
    </div> 
</body>

CSS：

html{ 
    padding-top: 10px; 
    padding-left: 10px; 
} 
#list { 
    position: relative; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
} 

.item { 
    height: 40px; 
    width: 410px; 
    background-color: white; 
    border-style: solid; 
    border-width: 1px; 
    border-color: grey; 
    margin-top: -1px; 

    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
} 

#list > .item:first-child { 
    -moz-border-radius-topleft: 4px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-top-left-radius: 4px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
} 

#list > .item:last-child { 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 4px; 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 4px; 
} 

    .item-name > p { 
    font-size: 14px; 
    padding: 10px 0px 0px 15px; 
    text-align: left; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    } 

.check-item, .down-info, .delete-item { 
    position: absolute; 
    width: 40px; 
    height: 40px; 
    margin-top: -41px; 
} 

.btn { 
    outline: none !important; 
} 

.down-info > button, .check-item > button, .delete-item > button { 
    padding: 10px 11px 10px 11px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
} 

    .down-info { 
    margin-left: 410px; 
    } 

.delete-item { 
    margin-left: 447px; 
    } 

.check-item { 
    margin-left: 484px; 
    } 

.description { 
    width: 382px; 
    height: auto; 
    display: none; 
    position: absolute; 
    z-index: 1; 
    margin-left: 64px; 

    background-color: #f5f5f5; 
    border: 1px solid #e3e3e3; 

    -webkit-box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.03); 
    -moz-box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.03); 
    box-shadow: 3px 3px 3px 2px rgba(0,0,0,0.03); 
} 

.description > p { 
    text-align: left; 
    font-size: 12px; 
    padding: 10px 10px 5px 15px; 
}

的jQuery：

$(".down-info").click(function() { 
$(".description").slideToggle('slow'); 
});

http://codepen.io/nmbusman/pen/ZYogje

答

这是因为当你做$(".description").slideToggle('slow');您选择所有“.description”元素并切换它们。你需要做的是在被点击的按钮父项“.item”元素中只切换一个“.description”元素。

编辑您的jQuery代码一点：

$(".down-info").click(function() { 
    $(this).closest('.item').find(".description").slideToggle('slow'); 
});

答

您的jQuery改成这样：

$(".down-info").click(function() { 
    $(this).parent().next(".description").slideToggle('slow'); 
});

希望帮助:)

我试着用.sibling和。接下来和couldn”没有办法，没有想到.parent，谢谢！ – 2015-03-02 20:42:09

jQuery不能滑动切换我的单独的div正确的单个按钮

相关推荐