2023年5月25日 15:31:46go评论64阅读模式

英文:

Add and remove classes for multiple elements (JQuery & JavaScript)

问题

我能够得到一个合适的答案来编辑我之前问题中的代码。

前一个问题的链接：
https://stackoverflow.com/questions/76328546/add-and-remove-classes-for-multiple-elements/76328793#76328793

现在我已经改进了之前的代码，并为其添加了内容，当单击图标时，其内容将显示或隐藏。

这个代码的问题是，单击任何可用图标时，所有图标的内容都会显示或隐藏。

但这不是我想要的。我希望通过单击每个图标来显示相应的内容，并且通过单击另一个图标，所有内容都将被隐藏，只有与单击的图标相关的内容将被显示。

$('body').on('click', '.icon_product', function() {
    $(this).toggleClass("change_icon-product");
    $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
    $(this).find(".txt-content").toggleClass("Toggle_txt-content");
});

.icon_product {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 15px;
    margin-top: 0px;
}

.icon-line1_product,
.icon-line2_product {
    width: 35px;
    height: 5px;
    background-color: #f00;
    margin: 6px 0;
    border-radius: 10px;
    transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
}

.icon-line2_product {
    transform: rotate(90deg) translate(-11px, 0px);
    -webkit-transform: rotate(90deg) translate(-11px, 0px);
    -moz-transform: rotate(90deg) translate(-11px, 0px);
    -o-transform: rotate(90deg) translate(-11px, 0px);
    -ms-transform: rotate(90deg) translate(-11px, 0px);
}

.change_icon-product .icon-line1_product {
    transform: rotate(45deg) translate(8px, 0px);
    -webkit-transform: rotate(45deg) translate(8px, 0px);
    -moz-transform: rotate(45deg) translate(8px, 0px);
    -o-transform: rotate(45deg) translate(8px, 0px);
    -ms-transform: rotate(45deg) translate(8px, 0px);
}

.change_icon-product .icon-line2_product {
    transform: rotate(-45deg) translate(8px, 0px);
    -webkit-transform: rotate(-45deg) translate(8px, 0px);
    -moz-transform: rotate(-45deg) translate(8px, 0px);
    -o-transform: rotate(-45deg) translate(8px, 0px);
    -ms-transform: rotate(-45deg) translate(8px, 0px);
}

.txt-content {
    display: none;
}

.Toggle_txt-content {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>Lorem ipsum</h3>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                    harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                </p>
            </div>
        </div>
    </div>

    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>Lorem ipsum</h3>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                    harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                </p>
            </div>
        </div>
    </div>

    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>Lorem ipsum</h3>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                    harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                </p>
            </div>
        </div>
    </div>
</section>

英文:

I was able to get a suitable answer to edit the code in my previous question.

Link to previous question:
https://stackoverflow.com/questions/76328546/add-and-remove-classes-for-multiple-elements/76328793#76328793

Now I have developed the previous code and added content to it that when the icon is clicked, its content will be shown or hidden.

The problem with this code is that by clicking on any of the available icons, the contents of all of them will appear or hide.

But that's not what I want. I want to display the corresponding content by clicking on each icon, and by clicking on another icon, all the content will be hidden and only the content related to the icon that was clicked will be displayed.

$(&#39;body&#39;).on(&#39;click&#39;, &#39;.icon_product&#39;, function() {
$(this).toggleClass(&quot;change_icon-product&quot;);
$(this).parent().siblings().find(&#39;.icon_product&#39;).removeClass(&quot;change_icon-product&quot;);
$(this).find(&quot;.txt-content&quot;).toggleClass(&quot;Toggle_txt-content&quot;);
});

.icon_product {
display: inline-block;
cursor: pointer;
position: relative;
padding: 15px;
margin-top: 0px;
}
.icon-line1_product,
.icon-line2_product {
width: 35px;
height: 5px;
background-color: #f00;
margin: 6px 0;
border-radius: 10px;
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
}
.icon-line2_product {
transform: rotate(90deg) translate(-11px, 0px);
-webkit-transform: rotate(90deg) translate(-11px, 0px);
-moz-transform: rotate(90deg) translate(-11px, 0px);
-o-transform: rotate(90deg) translate(-11px, 0px);
-ms-transform: rotate(90deg) translate(-11px, 0px);
}
.change_icon-product .icon-line1_product {
transform: rotate(45deg) translate(8px, 0px);
-webkit-transform: rotate(45deg) translate(8px, 0px);
-moz-transform: rotate(45deg) translate(8px, 0px);
-o-transform: rotate(45deg) translate(8px, 0px);
-ms-transform: rotate(45deg) translate(8px, 0px);
}
.change_icon-product .icon-line2_product {
transform: rotate(-45deg) translate(8px, 0px);
-webkit-transform: rotate(-45deg) translate(8px, 0px);
-moz-transform: rotate(-45deg) translate(8px, 0px);
-o-transform: rotate(-45deg) translate(8px, 0px);
-ms-transform: rotate(-45deg) translate(8px, 0px);
}
/* 
*
*
*
*/
.txt-content {
display: none;
}
.Toggle_txt-content {
display: block;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;section&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

答案1

得分: 2

以下是您要翻译的内容：

所以，如果另一个内容也打开了，您想要删除其他内容，只需添加一行代码：

$(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");

上面的代码行在另一个内容打开时删除或隐藏其他内容。

这是演示：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
$('body').on('click', '.icon_product', function() {
    $(this).toggleClass("change_icon-product");
    $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
    $(this).find(".txt-content").toggleClass("Toggle_txt-content");
    $(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");
});

<!-- language: lang-css -->
body {
  background: transparent; /* Make it white if you need */
  color: #fcbe24;
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.icon_product {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 15px;
    margin-top: 0px;
}

.icon-line1_product,
.icon-line2_product {
    width: 35px;
    height: 5px;
    background-color: #f00;
    margin: 6px 0;
    border-radius: 10px;
    transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
}

.icon-line2_product {
    transform: rotate(90deg) translate(-11px, 0px);
    -webkit-transform: rotate(90deg) translate(-11px, 0px);
    -moz-transform: rotate(90deg) translate(-11px, 0px);
    -o-transform: rotate(90deg) translate(-11px, 0px);
    -ms-transform: rotate(90deg) translate(-11px, 0px);
}

.change_icon-product .icon-line1_product {
    transform: rotate(45deg) translate(8px, 0px);
    -webkit-transform: rotate(45deg) translate(8px, 0px);
    -moz-transform: rotate(45deg) translate(8px, 0px);
    -o-transform: rotate(45deg) translate(8px, 0px);
    -ms-transform: rotate(45deg) translate(8px, 0px);
}

.change_icon-product .icon-line2_product {
    transform: rotate(-45deg) translate(8px, 0px);
    -webkit-transform: rotate(-45deg) translate(8px, 0px);
    -moz-transform: rotate(-45deg) translate(8px, 0px);
    -o-transform: rotate(-45deg) translate(8px, 0px);
    -ms-transform: rotate(-45deg) translate(8px, 0px);
}


/* 
*
*
*
 */

.txt-content {
    display: none;
}

.Toggle_txt-content {
    display: block;
}

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>

            <div class="main-content_product">
                <div class="icon_product">
                    <div class="icon-line1_product test"></div>
                    <div class="icon-line2_product test"></div>

                    <div class="txt-content">
                        <h3>Lorem ipsum</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        </p>
                    </div>

                </div>
            </div>

            <div class="main-content_product">
                <div class="icon_product">
                    <div class="icon-line1_product test"></div>
                    <div class="icon-line2_product test"></div>

                    <div class="txt-content">
                        <h3>Lorem ipsum</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        </p>
                    </div>

                </div>
            </div>

            <div class="main-content_product">
                <div class="icon_product">
                    <div class="icon-line1_product test"></div>
                    <div class="icon-line2_product test"></div>

                    <div class="txt-content">
                        <h3>Lorem ipsum</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        </p>
                    </div>

                </div>
            </div>

    </section>

<!-- end snippet -->

希望这能帮助您！

英文:

So, you want to remove other contents too, if another one is open for that you only had to add one line of code :

$(this).parent().siblings().find(&#39;.txt-content&#39;).removeClass(&quot;Toggle_txt-content&quot;);

The above line removes or hides other contents once the another one opens.

Here is the demo :

$(&#39;body&#39;).on(&#39;click&#39;, &#39;.icon_product&#39;, function() {
$(this).toggleClass(&quot;change_icon-product&quot;);
$(this).parent().siblings().find(&#39;.icon_product&#39;).removeClass(&quot;change_icon-product&quot;);
$(this).find(&quot;.txt-content&quot;).toggleClass(&quot;Toggle_txt-content&quot;);
$(this).parent().siblings().find(&#39;.txt-content&#39;).removeClass(&quot;Toggle_txt-content&quot;);
});

body {
background: transparent; /* Make it white if you need */
color: #fcbe24;
padding: 0 24px;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, &#39;Open Sans&#39;, &#39;Helvetica Neue&#39;, sans-serif;
}
.icon_product {
display: inline-block;
cursor: pointer;
position: relative;
padding: 15px;
margin-top: 0px;
}
.icon-line1_product,
.icon-line2_product {
width: 35px;
height: 5px;
background-color: #f00;
margin: 6px 0;
border-radius: 10px;
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
}
.icon-line2_product {
transform: rotate(90deg) translate(-11px, 0px);
-webkit-transform: rotate(90deg) translate(-11px, 0px);
-moz-transform: rotate(90deg) translate(-11px, 0px);
-o-transform: rotate(90deg) translate(-11px, 0px);
-ms-transform: rotate(90deg) translate(-11px, 0px);
}
.change_icon-product .icon-line1_product {
transform: rotate(45deg) translate(8px, 0px);
-webkit-transform: rotate(45deg) translate(8px, 0px);
-moz-transform: rotate(45deg) translate(8px, 0px);
-o-transform: rotate(45deg) translate(8px, 0px);
-ms-transform: rotate(45deg) translate(8px, 0px);
}
.change_icon-product .icon-line2_product {
transform: rotate(-45deg) translate(8px, 0px);
-webkit-transform: rotate(-45deg) translate(8px, 0px);
-moz-transform: rotate(-45deg) translate(8px, 0px);
-o-transform: rotate(-45deg) translate(8px, 0px);
-ms-transform: rotate(-45deg) translate(8px, 0px);
}
/* 
*
*
*
*/
.txt-content {
display: none;
}
.Toggle_txt-content {
display: block;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;section&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

添加和删除多个元素的类（JQuery和JavaScript）

问题

答案1

Typescript中的filter给我一个不满足条件的值数组。

backgroundImage在我的file.js中不起作用。

MUI V5 Why us Box with Grid component

内容在排序后不会改变，React。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论