Question

我想在点击另一个div时显示div。我想通过使用JavaScript在点击其他div时更改div的类来实现此目的。

这是我想要出现的div的HTML：

<div id="menutext1" class="hidden"></div>

这是控件div的HTML（要点击以显示上面的div）：

<div id="menu1"></div>

这是CSS：

.hidden { display: none; }

.unhidden { display: block; }

我到处寻找，似乎没有什么对我有用！

我没有很多JavaScript或JQuery的经验但我能理解它。

提前致谢：））

Answer 1

.addClass（）,. removeClass（）应该做你需要的。 .toggleClass（）也可能有用。你想在onClick（）方法中做这样的事情：

$('#menu1').click(function() {
    $('#menutext1').addClass('unhidden')
});

如果你想隐藏/取消隐藏，可以交换toggleClass（）。我应该补充一点，这些是JQuery函数，所以请确保在项目中包含JQuery。

Answer 2

您可以通过以下几种方式实现此目标：

$('#menu1').on('click', function(){
    $('#menutext1').show();
    // OR
    $('#menutext1').toggleClass('hidden unhidden');
    // OR
    $('#menutext1').removeClass('hidden ').addClass('unhidden');
});

<强> Demo

注意：使用jQuery和DOM-Manipulation时，请查看.ready()函数。

<强>参考

Answer 3

您可以使用classList.toggle方法在没有JQuery的情况下执行此操作。你真的不需要hidden课程。切换// get the element you want to click on var controlDiv = document.getElementById('menu1'); // assign a function to run when it is clicked controlDiv.addEventListener('click', function() { // turn the hidden class off or on document.getElementById('menutext1').classList.toggle('hidden'); });类时，div应返回其默认显示（块）。

DS_CONTROL

JavaScript：如何通过单击另一个div来更改div的类？

3 个答案: