按钮不能正确滑下

时间：2017-07-16 14:37:29

标签： javascript jquery html css

我有4个按钮，当我点击它时，它会向下滑动它下面的内容栏但是当我这样做时，另外3个按钮也会无意中滑下来。我希望按钮留在容器上，所以我该怎么做？

＆＃13;
＆＃13; 
$(document).ready(function() {

  $(".click").on("click", function() {
    var clickid = $(this).attr("data-panbodnum");
    $("." + clickid).slideToggle(300);
  });

});
＆＃13; 
html {
  font-family: Open Sans, sans-serif;
}

.btn {
  border: 1px solid black;
}

a {
  text-decoration: none;
  color: #353535;
}

.panbody1,
.panbody2,
.panbody3,
.panbody4 {
  display: none;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.navcon {
  max-width: 960px;
  margin: 0 auto;
  align-items: center;
  position: relative;
  height: 46px;
  flex-wrap: wrap;
  border: 1px solid black;
}

.btn1,
.btn2,
.btn3,
.btn4 {
  display: inline-block;
}

.panhead1,
.panhead2,
.panhead3,
.panhead4 {
  height: 46px;
  line-height: 46px;
  vertical-align: middle;
  color: #353535;
  font-weight: 400;
  padding: 0 15px;
  text-align: center;
  border-right: 1px solid black;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}

.navbar {
  font-size: 14px;
  position: fixed;
  top: 0;
  width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <div class="navcon">
    <div class="btn1">
      <div class="panhead1">
        <a class="click" data-panbodnum="panbody1" href="#">News</a>
      </div>
      <div class="panbody1">
        <a id="click1" href="#">Content 1</a>
      </div>
    </div>
    <div class="btn2">
      <div class="panhead2">
        <a class="click" data-panbodnum="panbody2" href="#">Contact</a>
      </div>
      <div class="panbody2">
        <a id="click2" href="#">Content 2</a>
      </div>
    </div>
    <div class="btn3">
      <div class="panhead3">
        <a class="click" data-panbodnum="panbody3" href="#">About</a>
      </div>
      <div class="panbody3">
        <a id="click3" href="#">Content 3</a>
      </div>
    </div>
    <div class="btn4">
      <div class="panhead4">
        <a class="click" data-panbodnum="panbody4" href="#">Forum</a>
      </div>
      <div class="panbody4">
        <a id="click4" href="#">Content 4</a>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

只需将vertical-align: top;添加到包含按钮和内容(.btn1,.btn2,.btn3,.btn4 ... )

的div

或使用float:left代替display:inline-block;

  

注意：您可以只使用一个类并将其应用于所有div而不是为每个div使用不同的类

＆＃13;
＆＃13; 
$(document).ready(function() {

  $(".click").on("click", function() {
    var clickid = $(this).attr("data-panbodnum");
    $("." + clickid).slideToggle(300);
  });

});
＆＃13; 
html {
  font-family: Open Sans, sans-serif;
}

.btn {
  border: 1px solid black;
}

a {
  text-decoration: none;
  color: #353535;
}

.panbody1,
.panbody2,
.panbody3,
.panbody4 {
  display: none;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.navcon {
  max-width: 960px;
  margin: 0 auto;
  align-items: center;
  position: relative;
  height: 46px;
  flex-wrap: wrap;
  border: 1px solid black;
}

.btn1,
.btn2,
.btn3,
.btn4 {
  float: left;
}

.panhead1,
.panhead2,
.panhead3,
.panhead4 {
  height: 46px;
  line-height: 46px;
  vertical-align: middle;
  color: #353535;
  font-weight: 400;
  padding: 0 15px;
  text-align: center;
  border-right: 1px solid black;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}

.navbar {
  font-size: 14px;
  position: fixed;
  top: 0;
  width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
  <div class="navcon">
    <div class="btn1">
      <div class="panhead1">
        <a class="click" data-panbodnum="panbody1" href="#">News</a>
      </div>
      <div class="panbody1">
        <a id="click1" href="#">Content 1</a>
      </div>
    </div>
    <div class="btn2">
      <div class="panhead2">
        <a class="click" data-panbodnum="panbody2" href="#">Contact</a>
      </div>
      <div class="panbody2">
        <a id="click2" href="#">Content 2</a>
      </div>
    </div>
    <div class="btn3">
      <div class="panhead3">
        <a class="click" data-panbodnum="panbody3" href="#">About</a>
      </div>
      <div class="panbody3">
        <a id="click3" href="#">Content 3</a>
      </div>
    </div>
    <div class="btn4">
      <div class="panhead4">
        <a class="click" data-panbodnum="panbody4" href="#">Forum</a>
      </div>
      <div class="panbody4">
        <a id="click4" href="#">Content 4</a>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

在解决您的问题之前，您应该注意，您可以对HTML进行一些改进。首先，你完全错过了课程的重点。他们应该将元素组合在一起，但是使它们成为增量元素完全违背了这一点。为所有元素组提供相同的类。然后，您可以使用DOM遍历在click事件处理程序中找到所需的元素。

其次，当它们应该是唯一的时，你也会在几个元素上重复相同的id。

要解决您的问题，请将position: absolute放在CSS中的.panbody：

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".click").on("click", function() {
    $(this).closest('.btn').find('.panbody').slideToggle(300);
  });
});
＆＃13; 
html {
  font-family: Open Sans, sans-serif;
}

.btn {
  border-right: 1px solid black;
}

a {
  text-decoration: none;
  color: #353535;
}

.panbody {
  display: none;
  position: absolute;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}

.navcon {
  max-width: 960px;
  margin: 0 auto;
  align-items: center;
  position: relative;
  height: 46px;
  flex-wrap: wrap;
  border: 1px solid black;
}

.btn {
  display: inline-block;
}

.panhead {
  height: 46px;
  line-height: 46px;
  vertical-align: middle;
  color: #353535;
  font-weight: 400;
  padding: 0 15px;
  text-align: center;
}

.navbar {
  font-size: 14px;
  position: fixed;
  top: 0;
  width: 100%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="navbar">
  <div class="navcon">
    <div class="btn">
      <div class="panhead">
        <a class="click" href="#">News</a>
      </div>
      <div class="panbody">
        <a href="#">Content 1</a>
      </div>
    </div>
    <div class="btn">
      <div class="panhead">
        <a class="click" href="#">Contact</a>
      </div>
      <div class="panbody">
        <a href="#">Content 2</a>
      </div>
    </div>
    <div class="btn">
      <div class="panhead">
        <a class="click" href="#">About</a>
      </div>
      <div class="panbody">
        <a href="#">Content 3</a>
      </div>
    </div>
    <div class="btn">
      <div class="panhead">
        <a class="click" href="#">Forum</a>
      </div>
      <div class="panbody">
        <a href="#">Content 4</a>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题