javascript - 如何在多个地方使用toggle Class功能？

Question

我不知道如何在单击向下箭头时显示整个文本。这是我尝试过的方法，它只适用于一个文本框，但是当我制作 2 个或更多文本框时，它不起作用？

有效的方法

body{
    background-color: dimgray;
}
.box{
    padding: 10px;
    border-bottom: 0.1px solid #dadada;
    width: 700px;
    background-color: #fff;
}
.box-content{
    height: 30px;
    overflow: hidden;
    transition: 0.3s;
}
.box-expand{
    height: auto !important;    
}
    
.box-opt{
    float: right;
}
.box-opt a{
    text-decoration: none;
    font-size: 70%;
    color: #646464;
    display: inline-block;
    padding: 5px;
    

<script src="https://use.fontawesome.com/e74aa8f5bb.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="box">
   
   <div class="box-opt">
        <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    <script>
        $("#box-toggle").click(function (e) {
            e.preventDefault();
            $(".box-content").toggleClass("box-expand");
        });
    </script>

它只适用于一个文本框，但是当我制作 2 个或更多文本框时，它不起作用？

一个不做兽人

body{
    background-color: dimgray;
}
.box{
    padding: 10px;
    border-bottom: 0.1px solid #dadada;
    width: 700px;
    background-color: #fff;
  margin: 10px;
}
.box-content{
    height: 30px;
    overflow: hidden;
    transition: 0.3s;
}
.box-expand{
    height: auto !important;    
}
    
.box-opt{
    float: right;
}
.box-opt a{
    text-decoration: none;
    font-size: 70%;
    color: #646464;
    display: inline-block;
    padding: 5px;
    

<script src="https://use.fontawesome.com/e74aa8f5bb.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="box">
   
   <div class="box-opt">
        <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    <script>
        $("#box-toggle").click(function (e) {
            e.preventDefault();
            $(".box-content").toggleClass("box-expand");
        });
    </script>
    
</div><div class="box">
   
   <div class="box-opt">
        <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    <script>
        $("#box-toggle").click(function (e) {
            e.preventDefault();
            $(".box-content").toggleClass("box-expand");
        });
    </script>
    
</div><div class="box">
   
   <div class="box-opt">
        <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    <script>
        $("#box-toggle").click(function (e) {
            e.preventDefault();
            $(".box-content").toggleClass("box-expand");
        });
    </script>
    
</div><div class="box">
   
   <div class="box-opt">
        <a href="#" id="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content" id="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    <script>
        $("#box-toggle").click(function (e) {
            e.preventDefault();
            $(".box-content").toggleClass("box-expand");
        });
    </script>
    
</div>

Answer 1

具有相同 ID 的元素不应超过一个——它们应特定于一个元素。话虽这么说，我会将 box-toggle 更改为一个类而不是 ID，并且还会删除您盒子上的 id="box-content"。您也不需要将脚本放在每个框之后——只需一次即可:

$('.box-toggle').click(function(e){ 
e.preventDefault(); 
$(this).parents('.box').find('.box-content').toggleClass('box-expand');
});

这样您就可以只定位您在其中单击的框。

body{
    background-color: dimgray;
}
.box{
    padding: 10px;
    border-bottom: 0.1px solid #dadada;
    width: 700px;
    background-color: #fff;
  margin: 10px;
}
.box-content{
    height: 30px;
    overflow: hidden;
    transition: 0.3s;
}
.box-expand{
    height: auto !important;    
}
    
.box-opt{
    float: right;
}
.box-opt a{
    text-decoration: none;
    font-size: 70%;
    color: #646464;
    display: inline-block;
    padding: 5px;
    

<script src="https://use.fontawesome.com/e74aa8f5bb.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="box">
   
   <div class="box-opt">
        <a href="#" class="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    
</div><div class="box">
   
   <div class="box-opt">
        <a href="#" class="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    
</div><div class="box">
   
   <div class="box-opt">
        <a href="#" class="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    
</div><div class="box">
   
   <div class="box-opt">
        <a href="#" class="box-toggle"> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a>
    </div>
    
    <p class="box-content">this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 this is an awsome comment bout this post this is an awsome comment bout this posttis is 7 </p>         
                    
    <script>
        $('.box-toggle').click(function(e){ 
e.preventDefault(); 
$(this).parent().parent().find('.box-content').toggleClass('box-expand');
});
    </script>
    
</div>