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

來源

2015-03-02 Nicholas Busman

這是因爲當你做$(".description").slideToggle('slow');您選擇所有「.description」元素並切換它們。你需要做的是在被點擊的按鈕父項「.item」元素中只切換一個「.description」元素。

編輯您的jQuery代碼一點：

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

來源

2015-03-02 20:37:36

您的jQuery改成這樣：

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

希望幫助:)

來源

2015-03-02 20:37:47 IKnowledge

我試着用.sibling和。接下來和couldn」沒有辦法，沒有想到.parent，謝謝！ – 2015-03-02 20:42:09

jQuery不能滑動切換我的單獨的div正確的單個按鈕

回答

相關問題