手风琴 - 一次只显示一个事件 - Accordion - display only one event at a time 小贝子编程网

>我一次只想显示一个事件。单击另一个事件时，它应隐藏最后一个事件。现在，所有事件都保持可见，我不知道如何隐藏以前单击的事件。

有

没有人对如何一次隐藏除一个事件之外的所有事件有建议？

我一次只想显示一个事件。单击另一个事件时，它应隐藏最后一个事件。现在，所有事件都保持可见，我不知道如何隐藏以前单击的事件。

有

没有人对如何一次隐藏除一个事件之外的所有事件有建议？

<!DOCTYPE html>
<html lang="en">
<head>
  <title>FV Runners</title>
  <meta charset="UTF-8">
  <link href="styles/normalize.css" rel="stylesheet" />
  <link href="styles/my_style.css" rel="stylesheet" />
<style>
.panel{
display:none;
color: orange;
}
#a:hover {
    color: gray;
}
.accordion + .panel:not(.active) {
  display: none;
}

</style>
</head>
<body>
  <div id="header">
    <h1>Fox Valley Runners Club</h1>
  </div>
  <div id="main"></div>
  <div id="pics">
    <div class="race_box">
  <img src="images/run1.jpg" id="5kpic" /><br />
  <figcaption>5k/10k Events</figcaption>
  <div class="races" id="5k">
    <h3>5k/10 Events</h3>
    <ul>
      <li class="accordion" id="a">Mini Sprint</li>
        <div class="panel">
            <p>10/30/17, Memorial Park, Appleton</p>
        </div>
        <br>
      <li class="accordion" id="a">Iron Horse</li>
      <div class="panel">
            <p>11/6/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Twilight Trail</li>
      <div class="panel">
            <p>11/13/17, River's Edge Park, Wrightstown</p>
        </div>
    </ul>
    </div>
    </div>
    <div class="race_box">
  <img src="images/run2.jpg" id="halfpic" /></button><br />
  <figcaption>Half Marathon Events</figcaption>
  <div class="races" id="half">
    <h3>Half Marathon Events</h3>
    <ul>
      <li class="accordion" id="a">Fox River Marathon</li>
      <div class="panel">
            <p>10/15/17, Pierce Park, Appleton</p>
        </div>
        <br>
      <li class="accordion" id="a">N.E.W. Half Marathon</li>
      <div class="panel">
            <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Winnebago Run</li>
      <div class="panel">
            <p>11/27/17, Menominee Park, Oshkosh</p>
        </div>
    </ul>
  </div>
    </div>
    <div class="race_box">
  <img src="images/run3.jpg" id="fullpic" /><br />
  <figcaption>Full Marathon Events</figcaption>
  <div class="races" id="full">
    <h3>Full Marathon Events</h3>
    <ul>
      <li class="accordion" id="a">Cheesehead Marathon</li>
      <div class="panel">
            <p>9/24/17, Pamperin Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Chain O'Lakes Marathon</li>
      <div class="panel">
            <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <br>
      <li class="accordion" id="a">Fox Cities Marathon</li>
        <div class="panel">
            <p>11/12/17, Menominee Park, Oshkosh</p>
        </div>

    </ul>
  </div>
    </div>
  </div>

  <script>

  var acc = document.getElementsByClassName("accordion");
  var i;
  for (i = 0; i < acc.length; i++) {
 acc[i].onclick = function(){
    this.classList.toggle("active");

    var panel = this.nextElementSibling;
    if (panel.style.display === "none") {
        panel.style.display = "block";
    } else {
        panel.style.display = "none";
        }
    }
}

我认为这就是你想要的，我所做的是当有人点击任何事件时，我隐藏了除用户单击的事件之外的所有事件，并决定是在主函数中隐藏还是显示该事件。

onload=hide;
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        hide(this);
        this.nextElementSibling.classList.toggle("hide");
    }
}
function hide(e){
    for (i = 0; i < acc.length; i++) {
        if(e!==acc[i] && acc[i].nextElementSibling.classList.value.indexOf("hide")<0)
          acc[i].nextElementSibling.classList.toggle("hide");
    }
}

.hide{
display:none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>FV Runners</title>
    <meta charset="UTF-8">
    <link href="styles/normalize.css" rel="stylesheet" />
    <link href="styles/my_style.css" rel="stylesheet" />
    <style>
        .panel {
            color: orange;
        }
        
        #a:hover {
            color: gray;
        }
    </style>
</head>
<body>
    <div id="header">
        <h1>Fox Valley Runners Club</h1>
    </div>
    <div id="main"></div>
    <div id="pics">
        <div class="race_box">
            <div class="races" id="5k">
                <h3>5k/10 Events</h3>
                <ul>
                    <li class="accordion" id="a">Mini Sprint</li>
                    <div class="panel">
                        <p>10/30/17, Memorial Park, Appleton</p>
                    </div>
                    <br>
                    <li class="accordion" id="a">Iron Horse</li>
                    <div class="panel">
                        <p>11/6/17, Bay Beach Park, Green Bay</p>
                    </div>
                    <br>
                    <li class="accordion" id="a">Twilight Trail</li>
                    <div class="panel">
                        <p>11/13/17, River's Edge Park, Wrightstown</p>
                    </div>
                </ul>
            </div>
        </div>
        <div class="race_box">
            <div class="races" id="half">
                <h3>Half Marathon Events</h3>
                <ul>
                    <li class="accordion" id="a">Fox River Marathon</li>
                    <div class="panel">
                        <p>10/15/17, Pierce Park, Appleton</p>
                    </div>
                    <br>
                    <li class="accordion" id="a">N.E.W. Half Marathon</li>
                    <div class="panel">
                        <p>10/29/17, Bay Beach Park, Green Bay</p>
                    </div>
                    <br>
                    <li class="accordion" id="a">Winnebago Run</li>
                    <div class="panel">
                        <p>11/27/17, Menominee Park, Oshkosh</p>
                    </div>
                </ul>
            </div>
        </div>
        <div class="race_box">
            <div class="races" id="full">
                <h3>Full Marathon Events</h3>
                <ul>
                    <li class="accordion" id="a">Cheesehead Marathon</li>
                    <div class="panel">
                        <p>9/24/17, Pamperin Park, Green Bay</p>
                    </div>
                    <br>
                    <li class="accordion" id="a">Chain O'Lakes Marathon</li>
                    <div class="panel">
                        <p>10/29/17, Bay Beach Park, Green Bay</p>
                    </div>
                    <br>
                    <li class="accordion" id="a">Fox Cities Marathon</li>
                    <div class="panel">
                        <p>11/12/17, Menominee Park, Oshkosh</p>
                    </div>
                </ul>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    </script>
</body>
</html>

一次

只显示一个事件的方法是为所有事件提供一个类，您可以使用它来隐藏所有事件。

因此，当您想展示新事件时，您只需

为您的班级选择并隐藏所有内容
显示特定事件

以防万一你打算使用Jquery的手风琴组件，这里是他们示例页面的改编。这里还有一个JsFiddle。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Accordion - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
      $(function() {
        $(".accordion").accordion({
          header: 'h3',
          collapsible: true,
          expanded: false,
          active: false,
          autoHeight: false,
          autoActivate: false
        });
      });
    </script>
  </head>
  <body>
    <div id="main">
      <h3>5k/10k Events</h3>
      <div class="accordion">
        <h3>Mini Sprint</h3>
        <div class='panel'>
          <p>10/30/17, Memorial Park, Appleton</p>
        </div>
        <h3>Iron Horse</h3>
        <div class='panel'>
          <p>11/6/17, Bay Beach Park, Green Bay</p>
        </div>
        <h3>Twilight Trail</h3>
        <div class='panel'>
          <p>11/13/17, River's Edge Park, Wrightstown</p>
        </div>
      </div>
      <h3>Half Marathon Events</h3>
      <div class="accordion">
        <h3>Fox River Marathon</h3>
        <div class="panel">
          <p>10/15/17, Pierce Park, Appleton</p>
        </div>
        <h3>N.E.W. Half Marathon</h3>
        <div class="panel">
          <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <h3>
          Winnebago Run</h3>
        <div class="panel">
          <p>11/27/17, Menominee Park, Oshkosh</p>
        </div>
      </div>
      <h3>Full Marathon Events</h3>
      <div class="accordion">
        <h3>Cheesehead Marathon</h3>
        <div class="panel">
          <p>9/24/17, Pamperin Park, Green Bay</p>
        </div>
        <h3>Chain O'Lakes Marathon</h3>
        <div class="panel">
          <p>10/29/17, Bay Beach Park, Green Bay</p>
        </div>
        <h3>Fox Cities Marathon</h3>
        <div class="panel">
          <p>11/12/17, Menominee Park, Oshkosh</p>
        </div>
      </div>
    </div>
  </body>
</html>

显然，造型仍然由您决定。

希望这有帮助！

手风琴 - 一次只显示一个事件

相关内容

最新更新

热门标签：