按钮不能正确滑动

问题描述：

我有4个按钮，当我点击它时，它会滑下它下面的内容栏，但是当我这样做时，其他3个按钮也会无意中滑落。我想让按钮留在容器上，那我该怎么做呢？按钮不能正确滑动

$(document).ready(function() { 
 

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

 
});

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%; 
 
}

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

答

只需添加vertical-align: top;到div的其中包含按钮和内容

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

注意：你也可以使用只有一个班级它适用于所有的div，而不是使用每个div的不同类

$(document).ready(function() { 
 

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

 
});

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%; 
 
}

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

感谢您的回答！在你走之前，你能告诉我如何制作，以便按钮盒相互靠近吗？因为当我在左边框上（border-left：1px纯黑色）时，它们之间会有一些空格或边距。 –

@MatiasTresch你可以通过使用'float：left'来代替'display：inline-block'来解决这个问题......查看我的编辑 – Chiller

感谢你付出的努力，我很欣赏 –

答

解决你的问题之前，你应该注意的是，你可以做一些改进你的HTML。首先，你完全没有类的点。他们应该将元素分组在一起，但是使它们渐进式完全违背这一点。给所有的元素组成同一个班级。然后，您可以使用DOM遍历在click事件处理程序中查找所需的元素。其次，如果它们应该是唯一的，你也可以在几个元素上重复同样的id。

解决您的问题，放在.panbodyposition: absolute在你的CSS：

$(document).ready(function() { 
 
    $(".click").on("click", function() { 
 
    $(this).closest('.btn').find('.panbody').slideToggle(300); 
 
    }); 
 
});

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%; 
 
}

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

按钮不能正确滑动

相关推荐