问题：

Javascript在单击时隐藏和显示，不呈现，不会给我任何错误

萧和平

2023-03-14

我正在尝试使用Javascript on-click函数显示和隐藏内容。我有一个相当长的表，所以我使用了class display：“none”作为它的一部分。然后我添加了一个按钮，点击该按钮将显示表的其余部分。比如隐藏/显示切换。它不会呈现。这是什么问题？控制台没有给我任何错误。谢谢,

null

  function myFunction() {
    var button = document.getElementById("button");
    var hidden = document.getElementsByClassName("change");

    for (var i = 0; i != hidden.length; i++) {
    if (hidden[i].style.display === 'none') {
        hidden[i].style.display === 'visible';
    } else {
      hidden[i].style.display === 'none';
    }
}};

#dates {
	width: 90%;
	margin: auto;
	margin-top: 50px;

}

table {
	width: 100%;
	margin: auto;
	border-bottom: 1px solid gray;
	text-align: left;
}
tr td {
	border-top: 1px solid gray;
	margin: 5px 10px;
	padding: 20px 10px;
	text-align: left;
	font-size: 1.3em;

}
th {
	font-size: 1.5em;
	padding: 10px;
}
.change {
	display: none;
}

#button {
	width: 25%;
	padding: 15px;
	margin: auto;
	text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Mystic Mind...</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
   <script type="text/javascript" src="css/lightbox-plus-jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="website gallery.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



</head>

<section class="holder" id="dates">
  <div>
    <header>Tour Dates</header>
       <table>
          <tr>
            <th>Date</th>
            <th>Venue</th>
            <th>Location</th>
          </tr>
          <tr>
            <td>August 5, 2018</td>
            <td>Parlour</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>June 22, 2018</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>May 4, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>May 3, 2018</td>
            <td>AfterOffice @ Deltoro</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>April 18, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 15, 2018</td>
            <td>Maldita Malta</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 2, 2018</td>
            <td>Vasily Zatek</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>December 1, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>November 11, 2017</td>
            <td>Buennanote</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>October 27, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>September 21, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>August 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>July 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 17, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>June 9, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 2, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>April 6, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 10, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>March 4, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>February 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>January 26, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>January 20, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
      </table>
          <div id="button">
              <button class="btn btn-outline-primary waves-effect" onclick="myFunction()">Past Dates...</button>
          </div>
   </div>
 </section>

null

共有2个答案

暴英达

2023-03-14

您有一个类.change，它具有规则display:none；我建议依赖于该类，而不是显式更改样式。下面是一个演示：

null

  

    function myFunction() {
	var button = document.getElementById("button");
	var hidden = document.getElementsByClassName("change");
	for(var i = 0; i < hidden.length; i++) {
	  hidden[i].classList.toggle('change' );
          // .toggle() instead of if and else
        }
}

#dates {
	width: 90%;
	margin: auto;
	margin-top: 50px;

}

table {
	width: 100%;
	margin: auto;
	border-bottom: 1px solid gray;
	text-align: left;
}
tr td {
	border-top: 1px solid gray;
	margin: 5px 10px;
	padding: 20px 10px;
	text-align: left;
	font-size: 1.3em;

}
th {
	font-size: 1.5em;
	padding: 10px;
}
.change {
	display: none;
}

#button {
	width: 25%;
	padding: 15px;
	margin: auto;
	text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Mystic Mind...</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
   <script type="text/javascript" src="css/lightbox-plus-jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="website gallery.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



</head>

<section class="holder" id="dates">
  <div>
    <header>Tour Dates</header>
       <table>
          <tr>
            <th>Date</th>
            <th>Venue</th>
            <th>Location</th>
          </tr>
          <tr>
            <td>August 5, 2018</td>
            <td>Parlour</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>June 22, 2018</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>May 4, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>May 3, 2018</td>
            <td>AfterOffice @ Deltoro</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>April 18, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 15, 2018</td>
            <td>Maldita Malta</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 2, 2018</td>
            <td>Vasily Zatek</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>December 1, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>November 11, 2017</td>
            <td>Buennanote</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>October 27, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>September 21, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>August 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>July 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 17, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>June 9, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 2, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>April 6, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 10, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>March 4, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>February 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>January 26, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>January 20, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
      </table>
          <div id="button">
              <button class="btn btn-outline-primary waves-effect" onclick="myFunction()">Past Dates...</button>
          </div>
   </div>
 </section>

邵城

2023-03-14

我认为问题出在javascript上

hidden[i].style.display===“none”返回的总是空的，因此您可以使用element.classname为该元素指定的返回类

所以:if（hidden[i].offsetwidth==0&&hidden[i].offsetheight==0){}如果元素存在，则返回true。

因此更改将如下所示：

function myFunction() {
    var button = document.getElementById("button").querySelector('button');
    var hidden = document.getElementsByClassName("change");
    for (var i = 0; i < hidden.length; i++) {
      if (hidden[i].offsetWidth == 0 && hidden[i].offsetHeight == 0) {
        hidden[i].style.setProperty("display", "table-row", "important");
        button.innerHTML = 'Show less...';
      } else {
        hidden[i].style.setProperty("display", "none", "important");
        button.innerHTML = 'Past Dates...';
      }
    }
};

null

function myFunction() {
    var button = document.getElementById("button").querySelector('button');
    var hidden = document.getElementsByClassName("change");
    for (var i = 0; i < hidden.length; i++) {
      if (hidden[i].offsetWidth == 0 && hidden[i].offsetHeight == 0) {
        hidden[i].style.setProperty("display", "table-row", "important");
        button.innerHTML = 'Show less...';
      } else {
        hidden[i].style.setProperty("display", "none", "important");
        button.innerHTML = 'Past Dates...';
      }
    }
};

#dates {
	width: 90%;
	margin: auto;
	margin-top: 50px;

}

table {
	width: 100%;
	margin: auto;
	border-bottom: 1px solid gray;
	text-align: left;
}
tr td {
	border-top: 1px solid gray;
	margin: 5px 10px;
	padding: 20px 10px;
	text-align: left;
	font-size: 1.3em;

}
th {
	font-size: 1.5em;
	padding: 10px;
}
.change {
	display: none;
}

#button {
	width: 25%;
	padding: 15px;
	margin: auto;
	text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title> Mystic Mind...</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:600" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
   <script type="text/javascript" src="css/lightbox-plus-jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="website gallery.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



</head>

<section class="holder" id="dates">
  <div>
    <header>Tour Dates</header>
       <table>
          <tr>
            <th>Date</th>
            <th>Venue</th>
            <th>Location</th>
          </tr>
          <tr>
            <td>August 5, 2018</td>
            <td>Parlour</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>June 22, 2018</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr>
            <td>May 4, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>May 3, 2018</td>
            <td>AfterOffice @ Deltoro</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>April 18, 2018</td>
            <td>Rose In Rio</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 15, 2018</td>
            <td>Maldita Malta</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>March 2, 2018</td>
            <td>Vasily Zatek</td>
            <td>Buenos Aires, Argentina</td>
          </tr>
          <tr>
            <td>December 1, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>November 11, 2017</td>
            <td>Buennanote</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>October 27, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>September 21, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>August 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>July 18, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 17, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>June 9, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>June 2, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>April 6, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 10, 2017</td>
            <td>One Loft</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>March 4, 2017</td>
            <td>Parlor</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>March 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>February 2, 2017</td>
            <td>Wallen</td>
            <td>Toronto, Canada</td>
          </tr>
          <tr class="change">
            <td>January 26, 2017</td>
            <td>Escobar</td>
            <td>Toronto, Canada</td>
          </tr>
           <tr class="change">
            <td>January 20, 2017</td>
            <td>Wildflower</td>
            <td>Toronto, Canada</td>
          </tr>
      </table>
          <div id="button">
              <button class="btn btn-outline-primary waves-effect" onclick="myFunction()">Past Dates...</button>
          </div>
   </div>
 </section>

类似资料：

在不使用jQuery的HTML和CSS中单击时显示隐藏div

问题内容：如果不使用JQuery，这可能吗？它用于移动网站，但是页面始终处于脱机状态，所以我真的不想使用jquery。与自定义CSS样式相比，为jquery mobile提供自定义样式要困难得多。问题答案：使用和输入使所选项目保持打开状态并切换。使用和命名输入与复选框类似，它仅关闭已打开的复选框。在两个输入上使用。使用和与输入类似，您还可以使用键触发状态。在手风琴外部单击将关
如何在React redux中单击时显示/隐藏组件？

我有一个组件：我需要在初始加载时隐藏此。如何通过点击标签来触发它的状态？
菜单n单击显示并隐藏div

我创建了一个包含三个项目的菜单:menu1、menu2、Menu3。我希望能够单击菜单内的每个按钮，并显示相关的容器。这已经管用了。我似乎无法使相关的在再次单击按钮时隐藏起来。我的代码： null null
在ng-repeat内单击ng时显示隐藏的div

问题内容：我正在使用Angular.js应用程序，该应用程序通过医疗程序的json文件进行过滤。当使用ng- click单击（在同一页面上）过程名称时，我想显示每个过程的详细信息。这是我到目前为止的内容，.procedure-details div设置为显示：无：我在角度上很新。有什么建议？问题答案：删除，然后改用：这是小提琴：http : //jsfiddle.net/asmKj/ 您
使用CSS单击显示/隐藏div

问题内容：我有一个菜单和三个隐藏的div，这些div取决于用户选择的选项。我只想使用CSS来显示/隐藏它们。我现在正在使用jquery，但我希望禁用js即可访问它。此处有人为其他人提供了此代码，但仅在div：hover或div：active时有效，当我将其更改为div：visited时它不起作用。我是否需要添加某些内容，或者这不是正确的方法？感谢您的帮助:) 问题是我的客户希望菜单被选中时此di
Material-UI Grid不会隐藏使用显示

问题内容：我想使用MUI Grid，并且如果屏幕很小，我想隐藏一项Grid，所以我找到了一个名为Display的东西。我的代码看起来像这样我不理解为什么它不起作用（文本仍然出现）。不能将显示与Grid一起使用吗？如果是，那为什么呢？问题答案：该风格的功能都不会自动支持组件。利用样式功能的最简单方法是使用Box组件。该组件使所有样式功能（例如display）都可用。所述组件具有组件道具（默

Javascript在单击时隐藏和显示，不呈现，不会给我任何错误

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档