如何在多个地方使用toggleClass功能？

时间：2016-09-01 18:53:13

标签： javascript jquery html css toggleclass

我不知道如何在单击向下箭头时显示整个文本。这是我尝试过的，它仅适用于一个文本框，但当我制作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个或更多文本框时，它不起作用？

THE ONE DOESNT ORK 

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>

2 个答案:

答案 0 :(得分：0)

您不应该有多个具有相同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>

答案 1 :(得分：0)

我在这里发现的第一个问题是你在多个元素上使用相同的ID。这就是为什么最后一个向下箭头是唯一似乎有用的箭头。

原因是 - 它是与您在HTML中查找的ID匹配的最后一个元素。 您可以使用这些类，并在每个循环中附加一个jQuery，以将click侦听器应用于每个元素

试试这个：

// Iterate over each '.box' class found
// Inside the Each function we can add parameters that help
// us identify the elements we are dealing with

jQuery('.box').each(function(i,e)) 
{
    // Make '.box' into a jQuery object that we can use
    t = jQuery(e);

    // Look for the toggle inside current box
    currentToggle = t.find('.box-opt > a');

    // Find box content to add class to
    textContainer = t.find('.box-content');

    // Apply the click listener to **EACH** element
    currentToggle.on('click',function(e){

         // Stop the browser from adding a '#' to the url and causing the
         // window to jump up
         e.preventDefault();
         textContainer.toggleClass('box-expand');
    });
}

这应该可以为您提供您正在寻找的结果。

你还应该重构你的HTML。 具有相同ID的多个元素不是很好的做法，并且可能导致很多麻烦。

相关问题
最新问题