激活另一个元素时如何关闭一个元素？

Question

我有两个要素。 如果1已经打开，那么当我打开2时，应该关闭1。 我还是Java语言的新手，所以如果有人wuold帮助，请谢谢。 现在，当我尝试单击时，什么也没有发生，如果我删除了while循环，那么它将起作用。 也许我不确定那里有什么错误，但是根据逻辑来看，它看起来是正确的。

<style>
.mystyle {
width: 300px;
height: 50px;
background-color: coral;
color: white;
font-size: 25px;
}

.newClassName {
width: 400px;
height: 100px;
background-color: lightblue;
text-align: center;
font-size: 25px;
color: navy;
margin-bottom: 10px;
}
</style>
</head>
<body>

<p>Click the button to toggle between two classes.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Try it 2</button>

<div id="myDIV" class="mystyle">
I am a DIV element
</div>

<div id="myDIV2" class="mystyle">
I am a DIV element2
</div>
<script>
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
function myFunction() {
x.classList.toggle("newClassName");
}
function myFunction2() {
y.classList.toggle("newClassName");
}
while (x.classList.contains("newClassName")) {
if (y.classList.contains("newClassName") = true) {
     x.classList.toggle("newClassName")；
}
}

</script>
</body>

Answer 1

您混合了普通的JavaScript和jQuery。 我重写了脚本。 我认为这就是您想要的...

 var x = $("#myDIV"); var y = $("#myDIV2"); function myFunction() { x.toggleClass("newClassName"); if( x.hasClass("newClassName") ) { y.removeClass("newClassName"); } } function myFunction2() { y.toggleClass("newClassName"); if( y.hasClass("newClassName") ) { x.removeClass("newClassName"); } }

 .mystyle { width: 300px; height: 50px; background-color: coral; color: white; font-size: 25px; } .newClassName { width: 400px; height: 100px; background-color: lightblue; text-align: center; font-size: 25px; color: navy; margin-bottom: 10px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Click the button to toggle between two classes.</p> <button onclick="myFunction()">Try it</button> <button onclick="myFunction2()">Try it 2</button> <div id="myDIV" class="mystyle"> I am a DIV element </div> <div id="myDIV2" class="mystyle"> I am a DIV element2 </div>

Answer 2

您不需要while loop

您将纯JS与jQuery混合在一起。 该代码被注释工作小提琴

编辑

正如评论中指出的那样，我的答案应包括代码，因此为：

Java脚本

$(function() { // This part was proposed by eisbehr
var div1 = $('#myDIV');
var div2 = $('#myDIV2');

$('#btn1').click(function() {
    div1.toggleClass('newClassName');

    if (div2.hasClass('newClassName')) {
        div2.removeClass('newClassName');
    }
});

$('#btn2').click(function() {
    div2.toggleClass('newClassName');

    if (div1.hasClass('newClassName')) {
        div1.removeClass('newClassName');
    }
});

}）;

的HTML

<p>Click the button to toggle between two classes.</p>
<button id="btn1">Try it</button>
<button id="btn2">Try it 2</button>

<div id="myDIV" class="mystyle">
  I am a DIV element
</div>

<div id="myDIV2" class="mystyle">
  I am a DIV element2
</div>

Answer 3

您可以将所有功能简化为仅一个功能，因为从MDN：

toggle（String [，force]）仅存在一个参数时：切换类值；否则，设置为0。 即，如果类存在，则将其删除并返回false，如果不存在，则将其添加并返回true。 当存在第二个参数时：如果第二个参数为true，则添加指定的类值，如果为false，则将其删除。

所以代码是：

 var x = document.getElementById("myDIV"); var y = document.getElementById("myDIV2"); function myFunction() { var result = x.classList.toggle("newClassName"); y.classList.toggle("newClassName", !result); }

 .mystyle { width: 300px; height: 50px; background-color: coral; color: white; font-size: 25px; } .newClassName { width: 400px; height: 100px; background-color: lightblue; text-align: center; font-size: 25px; color: navy; margin-bottom: 10px; }

 <p>Click the button to toggle between two classes.</p> <button onclick="myFunction()">Try it</button> <button onclick="myFunction()">Try it 2</button> <div id="myDIV" class="mystyle"> I am a DIV element </div> <div id="myDIV2" class="mystyle"> I am a DIV element2 </div>

激活另一个元素时如何关闭一个元素？

问题描述

3 个解决方案

解决方案1
3 2016-08-15 16:23:49

解决方案2
1 2016-08-15 16:28:46

编辑

解决方案3
0 已采纳 2016-08-15 16:34:45

激活另一个元素时如何关闭一个元素？

问题描述

3 个解决方案

解决方案1 3 2016-08-15 16:23:49

解决方案2 1 2016-08-15 16:28:46

编辑

解决方案3 0 已采纳 2016-08-15 16:34:45

解决方案1
3 2016-08-15 16:23:49

解决方案2
1 2016-08-15 16:28:46

解决方案3
0 已采纳 2016-08-15 16:34:45