Question

我试图通过按下按钮来打开和关闭隐藏的描述div，但是，我将把它应用到一个更大的项目，其中div将动态生成（由Django），所以我我避免使用特定的ID和类。但是，当我按下一个按钮时，我的所有描述都会打开，而不是我点击的一个元素。对不起，如果措辞不好，但我的代码链接显示了我的目的。

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

Answer 1

这是因为当你$(".description").slideToggle('slow');时，你选择所有＆＃34; .description＆＃34;元素并切换它们。你需要做的是只切换一个＆＃34; .description＆＃34;单击按钮父级中的元素＆＃34; .item＆＃34;元件。

稍微编辑了你的jQuery代码：

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

Answer 2

将你的jquery改为：

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

希望有所帮助：）

jQuery无法使用单个按钮正确切换我的单独div

2 个答案: