文章/答案/技术大牛

发布

社区首页 >问答首页 >单击同一按钮时如何删除类？

问单击同一按钮时如何删除类？
EN

Stack Overflow用户

提问于 2022-09-07 10:17:11

回答 1查看 59关注 0票数 1

请参阅下面的代码：

const sectionIcon = document.querySelectorAll(".nk-section-icons")
const sectionContainer = document.querySelectorAll(".nk-sec-container")
const sectionIconHover = document.querySelectorAll(".nk-section-icons")
sectionIcon.forEach((sectionBtn)=> {
    sectionBtn.addEventListener("click", (btns)=> {

        // console.log(sectionIconHover)
        const containerTarget = btns.currentTarget.parentElement.children[1]
        const containerHoverTarget = btns.currentTarget.parentElement.children[0]

        sectionContainer.forEach(items => {
            if(items !== containerTarget) {
                items.classList.remove("show")
                // itemHover.classList.remove("rb")
            }
        })

        sectionIconHover.forEach(itemHover => {
            if(itemHover !== containerHoverTarget) {
                itemHover.classList.remove("rb")
            }
        })

        containerTarget.classList.toggle("show")
        containerHoverTarget.classList.add("rb")
    })
})

.nk-section-icons {
    height: 30px;
    min-width: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
    background: yellow;
    margin-bottom: 5px;
}

.nk-section-icons.rb {
    background: black;
}

.nk-sec-container {
    width: 300px;
    min-width: 300px;
    height: 100%;
    background: red;
    position: absolute;
    z-index: 11;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    border-radius: 6px;
    left: 70px;
    top: 0px;

}

.nk-sec-container.show {
    background: green;
}

.nk-section-icons-container {
    position: relative;
}

<div class="nk-section-l-icons">
                <div class="nk-section-icons-container">
                    <div class="nk-section-icons fav"  data-title="Favorites">btn</div>
                    <div class="nk-sec-container nk-sec-fav-c">

                    </div>
                </div>
                <div class="nk-section-icons-container">
                    <div class="nk-section-icons recent"  data-title="Recent">btn</div>
                    <div class="nk-sec-container nk-sec-recent-c">
                        
                    </div>
                </div>
                <div class="nk-section-icons-container">
                    <div class="nk-section-icons notifs" data-title="Notifications">btn</div>
                    <div class="nk-sec-container nk-sec-notif-c">
                        
                    </div>
                </div>
            </div>

伙计们，你们能看看我的密码吗？目前，当我单击它正在工作的按钮时，它运行得很好，当我单击任何按钮时，类就会被移动。但是，如果我再次尝试单击相同的按钮，类rb不会被删除，但是show类将被删除。你能帮我解决这个问题吗？谢谢

html

jquery

css

javascript

回答 1

Stack Overflow用户

发布于 2022-09-07 11:13:47

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    if($("p").hasClass("main"))
    {
      $("p").toggleClass("main1");
    }
    else
    {
      $("p").toggleClass("main");
    }
  });
});
</script>
<style>
.main {
  font-size: 120%;
  color: red;
}
.main1 {
  font-size: 120%;
  color: green;
}
</style>
</head>
<body>

<button>Toggle class "main" for p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><b>Note:</b> Click the button more than once to see the toggle effect.</p>

</body>
</html>

使用切换:在添加和删除所有人的“主”类名之间切换

元素

toggleClass()方法在从选定元素中添加一个或多个类名之间切换。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73633786

复制

相似问题

问单击同一按钮时如何删除类？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击同一按钮时如何删除类？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问单击同一按钮时如何删除类？
EN