javascript - 尝试根据用户点击动态隐藏/显示 div

我有几个带有点击事件的元素。每个元素的点击事件只会显示一个 div，在同一页面的所有其他 div 中，它与之有关系。但是，当我单击该元素时，应该出现的隐藏 div 却没有出现。我看不出我在这里做错了什么。

非常感谢您的帮助。

这是一个片段:

$(document).ready(function(){

        var showMon = $("#monshowtimes");
        var showTue = $("#tueshowtimes");
        var showWed = $("#wedshowtimes");
        var showThu = $("#thurshowtimes");
        var showFri = $("#frishowtimes");
        var showSat = $("#satshowtimes");
        var showSun = $("#sunshowtimes");

        var monTimes = $(".mon-listings");
        var tueTimes = $(".tue-listings");
        var wedTimes = $(".wed-listings");
        var thurTimes = $(".thur-listings");
        var friTimes = $(".fri-listings");
        var satTimes = $(".sat-listings");
        var sunTimes = $(".sun-listings");
    $(showTue).click(function(){
        $(".screening-days li").removeClass("active");
        $(this).addClass("active");
        $(".movie-timing").each(function(){
            if ($(this).hasClass(".tueTimes")){
                $(this).css("display","block");
            } else $(this).css("display","none");
        })

        });


    })

.mon-listings, .tue-listings, .wed-listings, .thur-listings, .fri-listings, .sat-listings, .sun-listings {
    display: none;
}

<div class="container">

<section class="showtimes">

<ul class="screening-days">

<li class="active" id="monshowtimes">Monday</li>
<li id="tueshowtimes">Tuesday</li>
<li id="wedshowtimes">Wednesday</li>
<li id="thurshowtimes">Thursday</li>
<li id="frishowtimes">Friday</li>
<li id="satshowtimes">Saturday</li>
<li id="sunshowtimes">Sunday</li>
<li>Coming Soon</li>

</ul>

<span class="filter">

<p>Filter Films</p>

</span>

</section>

</div>

<!-- END OF VIEWING TIMES & DAYS TABS SELECTION / START OF MAIN MOVIE LISTINGS SECTION -->

<div class="container">

<div class="classic-movie">

<div class="movie-summary">

<div class="movie-image">

<img src="images/movie-images/ferres.jpg" class="movie-thumbnail">

</div>

<div class="movie-name-plot">

<h1>Ferris Bueller's Day Off (1987)</h1>

<p>High school student Ferris Bueller wants a day off from school and he's developed an incredibly sophisticated plan to pull it off. He talks his friend Cameron into taking his father's prized Ferrari and with his girlfriend Sloane head into Chicago for the day. While they are taking in what the city has to offer school principal Ed Rooney is convinced that Ferris is, not for the first time, playing hooky for the day and is hell bent to catch him out. Ferris has anticipated that, much to Rooney's chagrin.</p>

<p><span class="white-mini-header">Starring:</span>Matthew Broderick, Alan Ruck, Mia Sara</p>

<p><span class="white-mini-header">Runtime:</span>103min</p>

</div>

</div>

<div class="movie-showtimes">

<ul class="movie-timing mon-listings">

<li>MONDAY<br>10:45</li>
<li>MONDAY<br>13:10</li>
<li>MONDAY<br>15:45</li>
<li>MONDAY<br>18:25</li>
<li>MONDAY<br>20:30</li>
<li>MONDAY<br>21:50</li>

</ul>

<ul class="movie-timing tue-listings">

<li>TUESDAY<br>13:50</li>
<li>TUESDAY<br>15:10</li>
<li>TUESDAY<br>17:30</li>
<li>TUESDAY<br>20:00</li>
<li>TUESDAY<br>21:30</li>
<li>TUESDAY<br>22:50</li>

</ul>

<ul class="movie-timing wed-listings">

<li>WEDNESDAY<br>10:45</li>
<li>WEDNESDAY<br>13:10</li>
<li>WEDNESDAY<br>15:45</li>
<li>WEDNESDAY<br>18:25</li>
<li>WEDNESDAY<br>20:30</li>
<li>WEDNESDAY<br>21:50</li>

</ul>

<ul class="movie-timing thur-listings">

<li>THURSDAY<br>11:20</li>
<li>THURSDAY<br>14:45</li>
<li>THURSDAY<br>16:50</li>
<li>THURSDAY<br>18:00</li>
<li>THURSDAY<br>19:45</li>
<li>THURSDAY<br>22:15</li>

</ul>

<ul class="movie-timing fri-listings">

<li>FRIDAY<br>10:45</li>
<li>FRIDAY<br>13:10</li>
<li>FRIDAY<br>15:45</li>
<li>FRIDAY<br>18:25</li>
<li>FRIDAY<br>20:30</li>
<li>FRIDAY<br>21:50</li>

</ul>

<ul class="movie-timing sat-listings">

<li>SATURDAY<br>13:15</li>
<li>SATURDAY<br>14:30</li>
<li>SATURDAY<br>18:10</li>
<li>SATURDAY<br>19:45</li>
<li>SATURDAY<br>20:15</li>
<li>SATURDAY<br>22:30</li>

</ul>

<ul class="movie-timing sun-listings">

<li>SUNDAY<br>14:45</li>
<li>SUNDAY<br>16:30</li>
<li>SUNDAY<br>18:10</li>
<li>SUNDAY<br>20:35</li>
<li>SUNDAY<br>21:15</li>
<li>SUNDAY<br>22:45</li>

</ul>

</div>

</div>

<div class="classic-movie">

<div class="movie-summary">

<div class="movie-image">

<img src="images/movie-images/back-to-the-future.jpg" class="movie-thumbnail">

</div>

<div class="movie-name-plot">

<h1>Back to the Future (1985)</h1>

<p>Marty McFly, a typical American teenager of the Eighties, is accidentally sent back to 1955 in a plutonium-powered DeLorean 'time machine' invented by a slightly mad scientist. During his often hysterical, always amazing trip back in time, Marty must make certain his teenage parents-to-be meet and fall in love - so he can get back to the future.</p>

<p><span class="white-mini-header">Starring:</span> Michael J. Fox, Christopher Lloyd, Lea Thompson</p>

<p><span class="white-mini-header">Runtime:</span>116 min</p>

</div>

</div>

<div class="movie-showtimes">

<ul class="movie-timing mon-listings">

<li>MONDAY<br>11:20</li>
<li>MONDAY<br>14:45</li>
<li>MONDAY<br>16:50</li>
<li>MONDAY<br>18:00</li>
<li>MONDAY<br>19:45</li>
<li>MONDAY<br>22:15</li>

</ul>

<ul class="movie-timing tue-listings">

<li>TUESDAY<br>14:45</li>
<li>TUESDAY<br>16:30</li>
<li>TUESDAY<br>18:10</li>
<li>TUESDAY<br>20:35</li>
<li>TUESDAY<br>21:15</li>
<li>TUESDAY<br>22:45</li>


</ul>

<ul class="movie-timing wed-listings">

<li>WEDNESDAY<br>10:45</li>
<li>WEDNESDAY<br>13:10</li>
<li>WEDNESDAY<br>15:45</li>
<li>WEDNESDAY<br>18:25</li>
<li>WEDNESDAY<br>20:30</li>
<li>WEDNESDAY<br>21:50</li>

</ul>

<ul class="movie-timing thur-listings">

<li>THURSDAY<br>11:20</li>
<li>THURSDAY<br>14:45</li>
<li>THURSDAY<br>16:50</li>
<li>THURSDAY<br>18:00</li>
<li>THURSDAY<br>19:45</li>
<li>THURSDAY<br>22:15</li>

</ul>

<ul class="movie-timing fri-listings">

<li>FRIDAY<br>10:45</li>
<li>FRIDAY<br>13:10</li>
<li>FRIDAY<br>15:45</li>
<li>FRIDAY<br>18:25</li>
<li>FRIDAY<br>20:30</li>
<li>FRIDAY<br>21:50</li>

</ul>

<ul class="movie-timing sat-listings">

<li>SATURDAY<br>13:15</li>
<li>SATURDAY<br>14:30</li>
<li>SATURDAY<br>18:10</li>
<li>SATURDAY<br>19:45</li>
<li>SATURDAY<br>20:15</li>
<li>SATURDAY<br>22:30</li>

</ul>

<ul class="movie-timing sun-listings">

<li>SUNDAY<br>14:45</li>
<li>SUNDAY<br>16:30</li>
<li>SUNDAY<br>18:10</li>
<li>SUNDAY<br>20:35</li>
<li>SUNDAY<br>21:15</li>
<li>SUNDAY<br>22:45</li>

</ul>

</div>

</div>

<div class="classic-movie">

<div class="movie-summary">

<div class="movie-image">

<img src="images/movie-images/first-blood.jpg" class="movie-thumbnail">

</div>

<div class="movie-name-plot">

<h1>First Blood (1982)</h1>

<p>John Rambo is a disoriented Vietnam Vet. He is hitchhiking from town to town to see friends from the war. A sheriff tries to make him leave town and when he refuses, arrests him for vagrancy. While in jail, a deputy takes delight in abusing him. Rambo escapes showing his old Vietnam fighting skills and takes to the woods as the sheriff and deputies try and find him in his element. Things get out of hand as Colonel Trautman, Rambo's old commander, appears to shed light on the situation.</p>

<p><span class="white-mini-header">Starring:</span>Sylvester Stallone, Brian Dennehy, Richard Crenna</p>

<p><span class="white-mini-header">Runtime:</span>93 min</p>

</div>

</div>

<div class="movie-showtimes">

<ul class="movie-timing mon-listings">

<li>MONDAY<br>10:45</li>
<li>MONDAY<br>13:30</li>
<li>MONDAY<br>17:00</li>
<li>MONDAY<br>18:45</li>
<li>MONDAY<br>20:15</li>
<li>MONDAY<br>22:00</li>

</ul>

<ul class="movie-timing tue-listings">

<li>TUESDAY<br>13:50</li>
<li>TUESDAY<br>15:10</li>
<li>TUESDAY<br>17:30</li>
<li>TUESDAY<br>20:00</li>
<li>TUESDAY<br>21:30</li>
<li>TUESDAY<br>22:50</li>

</ul>

<ul class="movie-timing wed-listings">

<li>WEDNESDAY<br>14:45</li>
<li>WEDNESDAY<br>16:30</li>
<li>WEDNESDAY<br>18:10</li>
<li>WEDNESDAY<br>20:35</li>
<li>WEDNESDAY<br>21:15</li>
<li>WEDNESDAY<br>22:45</li>

</ul>

<ul class="movie-timing thur-listings">

<li>THURSDAY<br>11:20</li>
<li>THURSDAY<br>14:45</li>
<li>THURSDAY<br>16:50</li>
<li>THURSDAY<br>18:00</li>
<li>THURSDAY<br>19:45</li>
<li>THURSDAY<br>22:15</li>

</ul>

<ul class="movie-timing fri-listings">

<li>FRIDAY<br>10:45</li>
<li>FRIDAY<br>13:10</li>
<li>FRIDAY<br>15:45</li>
<li>FRIDAY<br>18:25</li>
<li>FRIDAY<br>20:30</li>
<li>FRIDAY<br>21:50</li>

</ul>

<ul class="movie-timing sat-listings">

<li>SATURDAY<br>13:15</li>
<li>SATURDAY<br>14:30</li>
<li>SATURDAY<br>18:10</li>
<li>SATURDAY<br>19:45</li>
<li>SATURDAY<br>20:15</li>
<li>SATURDAY<br>22:30</li>

</ul>

<ul class="movie-timing sun-listings">

<li>SUNDAY<br>14:45</li>
<li>SUNDAY<br>16:30</li>
<li>SUNDAY<br>18:10</li>
<li>SUNDAY<br>20:35</li>
<li>SUNDAY<br>21:15</li>
<li>SUNDAY<br>22:45</li>

</ul>


</div>

</div>

<div class="classic-movie">

<div class="movie-summary">

<div class="movie-image">

<img src="images/movie-images/breakfast-club.jpg" class="movie-thumbnail">

</div>

<div class="movie-name-plot">

<h1>The Breakfast Club (1985)</h1>

<p>They were five students with nothing in common, faced with spending a Saturday detention together in their high school library. At 7 a.m., they had nothing to say, but by 4 p.m., they had bared their souls to each other and become good friends. To the outside world they were simply a Brain, an Athlete, a Basket Case, a Princess, and a Criminal, but to each other, they would always be the Breakfast Club.</p>

<p><span class="white-mini-header">Starring:</span>Emilio Estevez, Judd Nelson, Molly Ringwald</p>

<p><span class="white-mini-header">Runtime:</span>97 min</p>

</div>

</div>

<div class="movie-showtimes">

<ul class="movie-timing mon-listings">

<li>MONDAY<br>13:15</li>
<li>MONDAY<br>14:30</li>
<li>MONDAY<br>18:10</li>
<li>MONDAY<br>19:45</li>
<li>MONDAY<br>20:15</li>
<li>MONDAY<br>22:30</li>

</ul>

<ul class="movie-timing tue-listings">

<li>TUESDAY<br>13:50</li>
<li>TUESDAY<br>15:10</li>
<li>TUESDAY<br>17:30</li>
<li>TUESDAY<br>20:00</li>
<li>TUESDAY<br>21:30</li>
<li>TUESDAY<br>22:50</li>

</ul>

<ul class="movie-timing wed-listings">

<li>WEDNESDAY<br>10:45</li>
<li>WEDNESDAY<br>13:10</li>
<li>WEDNESDAY<br>15:45</li>
<li>WEDNESDAY<br>18:25</li>
<li>WEDNESDAY<br>20:30</li>
<li>WEDNESDAY<br>21:50</li>

</ul>

<ul class="movie-timing thur-listings">

<li>THURSDAY<br>11:20</li>
<li>THURSDAY<br>14:45</li>
<li>THURSDAY<br>16:50</li>
<li>THURSDAY<br>18:00</li>
<li>THURSDAY<br>19:45</li>
<li>THURSDAY<br>22:15</li>

</ul>

<ul class="movie-timing fri-listings">

<li>FRIDAY<br>10:45</li>
<li>FRIDAY<br>13:10</li>
<li>FRIDAY<br>15:45</li>
<li>FRIDAY<br>18:25</li>
<li>FRIDAY<br>20:30</li>
<li>FRIDAY<br>21:50</li>

</ul>

<ul class="movie-timing sat-listings">

<li>SATURDAY<br>13:15</li>
<li>SATURDAY<br>14:30</li>
<li>SATURDAY<br>18:10</li>
<li>SATURDAY<br>19:45</li>
<li>SATURDAY<br>20:15</li>
<li>SATURDAY<br>22:30</li>

</ul>

<ul class="movie-timing sun-listings">

<li>SUNDAY<br>14:45</li>
<li>SUNDAY<br>16:30</li>
<li>SUNDAY<br>18:10</li>
<li>SUNDAY<br>20:35</li>
<li>SUNDAY<br>21:15</li>
<li>SUNDAY<br>22:45</li>

</ul>


</div>

</div>

<div class="classic-movie">

<div class="movie-summary">

<div class="movie-image">

<img src="images/movie-images/halloween.jpg" class="movie-thumbnail">

</div>

<div class="movie-name-plot">

<h1>Halloween (1979)</h1>

<p>The year is 1963, the night: Halloween. Police are called to 43 Lampkin Ln. only to discover that 15 year old Judith Myers has been stabbed to death, by her 6 year-old brother, Michael. After being institutionalized for 15 years, Myers breaks out on the night before Halloween. No one knows, nor wants to find out, what will happen on October 31st 1978 besides Myers' psychiatrist, Dr. Loomis. He knows Michael is coming back to Haddonfield, but by the time the town realizes it, it'll be too late for many people.</p>

<p><span class="white-mini-header">Starring:</span>Donald Pleasence, Jamie Lee Curtis, Tony Moran</p>

<p><span class="white-mini-header">Runtime:</span>91 min</p>

</div>

</div>

<div class="movie-showtimes">

<ul class="movie-timing mon-listings">

<li>MONDAY<br>14:45</li>
<li>MONDAY<br>16:30</li>
<li>MONDAY<br>18:10</li>
<li>MONDAY<br>20:35</li>
<li>MONDAY<br>21:15</li>
<li>MONDAY<br>22:45</li>

</ul>

<ul class="movie-timing tue-listings">

<li>TUESDAY<br>13:30</li>
<li>TUESDAY<br>15:00</li>
<li>TUESDAY<br>18:00</li>
<li>TUESDAY<br>18:15</li>
<li>TUESDAY<br>21:30</li>
<li>TUESDAY<br>22:15</li>

</ul>

<ul class="movie-timing wed-listings">

<li>WEDNESDAY<br>16:30</li>
<li>WEDNESDAY<br>17:00</li>
<li>WEDNESDAY<br>19:45</li>
<li>WEDNESDAY<br>20:00</li>
<li>WEDNESDAY<br>21:45</li>
<li>WEDNESDAY<br>22:30</li>

</ul>

<ul class="movie-timing thur-listings">

<li>THURSDAY<br>12:30</li>
<li>THURSDAY<br>13:30</li>
<li>THURSDAY<br>15:15</li>
<li>THURSDAY<br>16:15</li>
<li>THURSDAY<br>19:00</li>
<li>THURSDAY<br>22:30</li>

</ul>

<ul class="movie-timing fri-listings">

<li>FRIDAY<br>16:30</li>
<li>FRIDAY<br>17:00</li>
<li>FRIDAY<br>19:45</li>
<li>FRIDAY<br>20:00</li>
<li>FRIDAY<br>21:45</li>
<li>FRIDAY<br>22:30</li

</ul>

<ul class="movie-timing sat-listings">

<li>SATURDAY<br>14:45</li>
<li>SATURDAY<br>16:30</li>
<li>SATURDAY<br>18:10</li>
<li>SATURDAY<br>20:35</li>
<li>SATURDAY<br>21:15</li>
<li>SATURDAY<br>22:45</li>

</ul>

<ul class="movie-timing sun-listings">

<li>SUNDAY<br>12:30</li>
<li>SUNDAY<br>13:30</li>
<li>SUNDAY<br>15:15</li>
<li>SUNDAY<br>16:15</li>
<li>SUNDAY<br>19:00</li>
<li>SUNDAY<br>22:30</li>

</ul>


</div>

</div>

<div class="classic-movie">

<div class="movie-summary">

<div class="movie-image">

<img src="images/movie-images/goodfellas.jpg" class="movie-thumbnail">

</div>

<div class="movie-name-plot">

<h1>Goodfellas (1990)</h1>

<p>Henry Hill might be a small time gangster, who may have taken part in a robbery with Jimmy Conway and Tommy De Vito, two other gangsters who might have set their sights a bit higher. His two partners could kill off everyone else involved in the robbery, and slowly start to think about climbing up through the hierarchy of the Mob. Henry, however, might be badly affected by his partners' success, but will he consider stooping low enough to bring about the downfall of Jimmy and Tommy?</p>

<p><span class="white-mini-header">Starring:</span>Robert De Niro, Ray Liotta, Joe Pesci</p>

<p><span class="white-mini-header">Runtime:</span>146 min</p>

</div>

</div>

<div class="movie-showtimes">

<ul class="movie-timing mon-listings">

<li>MONDAY<br>12:25</li>
<li>MONDAY<br>13:30</li>
<li>MONDAY<br>14:50</li>
<li>MONDAY<br>17:35</li>
<li>MONDAY<br>20:15</li>
<li>MONDAY<br>22:30</li>

</ul>

<ul class="movie-timing tue-listings">

<li>TUESDAY<br>13:50</li>
<li>TUESDAY<br>15:10</li>
<li>TUESDAY<br>17:30</li>
<li>TUESDAY<br>20:00</li>
<li>TUESDAY<br>21:30</li>
<li>TUESDAY<br>22:50</li>

</ul>

<ul class="movie-timing wed-listings">

<li>WEDNESDAY<br>10:45</li>
<li>WEDNESDAY<br>13:10</li>
<li>WEDNESDAY<br>15:45</li>
<li>WEDNESDAY<br>18:25</li>
<li>WEDNESDAY<br>20:30</li>
<li>WEDNESDAY<br>21:50</li>

</ul>

<ul class="movie-timing thur-listings">

<li>THURSDAY<br>11:20</li>
<li>THURSDAY<br>14:45</li>
<li>THURSDAY<br>16:50</li>
<li>THURSDAY<br>18:00</li>
<li>THURSDAY<br>19:45</li>
<li>THURSDAY<br>22:15</li>

</ul>

<ul class="movie-timing fri-listings">

<li>FRIDAY<br>10:45</li>
<li>FRIDAY<br>13:10</li>
<li>FRIDAY<br>15:45</li>
<li>FRIDAY<br>18:25</li>
<li>FRIDAY<br>20:30</li>
<li>FRIDAY<br>21:50</li>

</ul>

<ul class="movie-timing sat-listings">

<li>SATURDAY<br>13:15</li>
<li>SATURDAY<br>14:30</li>
<li>SATURDAY<br>18:10</li>
<li>SATURDAY<br>19:45</li>
<li>SATURDAY<br>20:15</li>
<li>SATURDAY<br>22:30</li>

</ul>

<ul class="movie-timing sun-listings">

<li>SUNDAY<br>14:45</li>
<li>SUNDAY<br>16:30</li>
<li>SUNDAY<br>18:10</li>
<li>SUNDAY<br>20:35</li>
<li>SUNDAY<br>21:15</li>
<li>SUNDAY<br>22:45</li>

</ul>


</div>

</div>

</div>

最佳答案

我玩了一下你的代码......
(我删除了你所有的 JS，创建了一个隐藏所有并仅显示点击日期的时间的函数 - 起初，我在 html 中使用了 onclick 的每个 li 的 .screening-days，但后来我绑定(bind)了它到您的 .screening-days li 的“点击”事件。我还将类 thur-listings 修改为 thu-listings 以将所有的日子都写在 3 个字母上，只是因为我更喜欢。)
……最后是这样的:

$(".screening-days li").click(function(){
  $(".screening-days li").removeClass("active");
  $(this).addClass("active");
  $(".movie-timing").hide();
  $("." + $(this).attr("id").substr(0, 3) + "-listings").show();
});

// We can even open listings on page load based on current day !
$(document).ready(function(){
  var d = new Date();
  var days = ["sun","mon","tue","wed","thu","fri","sat"];
  $("#" + days[d.getDay()] + "showtimes").trigger("click");
});

.movie-timing {
  display: none;
}
.screening-days .active {
  color: blue;
}
.screening-days li:hover {
  text-decoration: underline;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <section class="showtimes">
    <ul class="screening-days">
      <li id="monshowtimes">Monday</li>
      <li id="tueshowtimes">Tuesday</li>
      <li id="wedshowtimes">Wednesday</li>
      <li id="thushowtimes">Thursday</li>
      <li id="frishowtimes">Friday</li>
      <li id="satshowtimes">Saturday</li>
      <li id="sunshowtimes">Sunday</li>
      <li id="comshowtimes">Coming Soon</li>
    </ul>
    <span class="filter">
    <p>Filter Films</p>
    </span>
  </section>
</div>

<!-- END OF VIEWING TIMES & DAYS TABS SELECTION / START OF MAIN MOVIE LISTINGS SECTION -->

<div class="container">
  <div class="classic-movie">
    <div class="movie-summary">
      <div class="movie-image">
        <img src="images/movie-images/ferres.jpg" class="movie-thumbnail">
      </div>
      <div class="movie-name-plot">
        <h1>Ferris Bueller's Day Off (1987)</h1>
        <p>High school student Ferris Bueller wants a day off from school and he's developed an incredibly sophisticated plan to pull it off. He talks his friend Cameron into taking his father's prized Ferrari and with his girlfriend Sloane head into Chicago
          for the day. While they are taking in what the city has to offer school principal Ed Rooney is convinced that Ferris is, not for the first time, playing hooky for the day and is hell bent to catch him out. Ferris has anticipated that, much to
          Rooney's chagrin.</p>
        <p><span class="white-mini-header">Starring:</span>Matthew Broderick, Alan Ruck, Mia Sara</p>
        <p><span class="white-mini-header">Runtime:</span>103min</p>
      </div>
    </div>
    <div class="movie-showtimes">
      <ul class="movie-timing mon-listings">
        <li>MONDAY<br>10:45</li>
        <li>MONDAY<br>13:10</li>
        <li>MONDAY<br>15:45</li>
        <li>MONDAY<br>18:25</li>
        <li>MONDAY<br>20:30</li>
        <li>MONDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing tue-listings">
        <li>TUESDAY<br>13:50</li>
        <li>TUESDAY<br>15:10</li>
        <li>TUESDAY<br>17:30</li>
        <li>TUESDAY<br>20:00</li>
        <li>TUESDAY<br>21:30</li>
        <li>TUESDAY<br>22:50</li>
      </ul>
      <ul class="movie-timing wed-listings">
        <li>WEDNESDAY<br>10:45</li>
        <li>WEDNESDAY<br>13:10</li>
        <li>WEDNESDAY<br>15:45</li>
        <li>WEDNESDAY<br>18:25</li>
        <li>WEDNESDAY<br>20:30</li>
        <li>WEDNESDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing thu-listings">
        <li>THURSDAY<br>11:20</li>
        <li>THURSDAY<br>14:45</li>
        <li>THURSDAY<br>16:50</li>
        <li>THURSDAY<br>18:00</li>
        <li>THURSDAY<br>19:45</li>
        <li>THURSDAY<br>22:15</li>
      </ul>
      <ul class="movie-timing fri-listings">
        <li>FRIDAY<br>10:45</li>
        <li>FRIDAY<br>13:10</li>
        <li>FRIDAY<br>15:45</li>
        <li>FRIDAY<br>18:25</li>
        <li>FRIDAY<br>20:30</li>
        <li>FRIDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing sat-listings">
        <li>SATURDAY<br>13:15</li>
        <li>SATURDAY<br>14:30</li>
        <li>SATURDAY<br>18:10</li>
        <li>SATURDAY<br>19:45</li>
        <li>SATURDAY<br>20:15</li>
        <li>SATURDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing sun-listings">
        <li>SUNDAY<br>14:45</li>
        <li>SUNDAY<br>16:30</li>
        <li>SUNDAY<br>18:10</li>
        <li>SUNDAY<br>20:35</li>
        <li>SUNDAY<br>21:15</li>
        <li>SUNDAY<br>22:45</li>
      </ul>
    </div>
  </div>
  <div class="classic-movie">
    <div class="movie-summary">
      <div class="movie-image">
        <img src="images/movie-images/back-to-the-future.jpg" class="movie-thumbnail">
      </div>
      <div class="movie-name-plot">
        <h1>Back to the Future (1985)</h1>
        <p>Marty McFly, a typical American teenager of the Eighties, is accidentally sent back to 1955 in a plutonium-powered DeLorean 'time machine' invented by a slightly mad scientist. During his often hysterical, always amazing trip back in time, Marty
          must make certain his teenage parents-to-be meet and fall in love - so he can get back to the future.</p>
        <p><span class="white-mini-header">Starring:</span> Michael J. Fox, Christopher Lloyd, Lea Thompson</p>
        <p><span class="white-mini-header">Runtime:</span>116 min</p>
      </div>
    </div>
    <div class="movie-showtimes">
      <ul class="movie-timing mon-listings">
        <li>MONDAY<br>11:20</li>
        <li>MONDAY<br>14:45</li>
        <li>MONDAY<br>16:50</li>
        <li>MONDAY<br>18:00</li>
        <li>MONDAY<br>19:45</li>
        <li>MONDAY<br>22:15</li>
      </ul>
      <ul class="movie-timing tue-listings">
        <li>TUESDAY<br>14:45</li>
        <li>TUESDAY<br>16:30</li>
        <li>TUESDAY<br>18:10</li>
        <li>TUESDAY<br>20:35</li>
        <li>TUESDAY<br>21:15</li>
        <li>TUESDAY<br>22:45</li>
      </ul>
      <ul class="movie-timing wed-listings">
        <li>WEDNESDAY<br>10:45</li>
        <li>WEDNESDAY<br>13:10</li>
        <li>WEDNESDAY<br>15:45</li>
        <li>WEDNESDAY<br>18:25</li>
        <li>WEDNESDAY<br>20:30</li>
        <li>WEDNESDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing thu-listings">
        <li>THURSDAY<br>11:20</li>
        <li>THURSDAY<br>14:45</li>
        <li>THURSDAY<br>16:50</li>
        <li>THURSDAY<br>18:00</li>
        <li>THURSDAY<br>19:45</li>
        <li>THURSDAY<br>22:15</li>
      </ul>
      <ul class="movie-timing fri-listings">
        <li>FRIDAY<br>10:45</li>
        <li>FRIDAY<br>13:10</li>
        <li>FRIDAY<br>15:45</li>
        <li>FRIDAY<br>18:25</li>
        <li>FRIDAY<br>20:30</li>
        <li>FRIDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing sat-listings">
        <li>SATURDAY<br>13:15</li>
        <li>SATURDAY<br>14:30</li>
        <li>SATURDAY<br>18:10</li>
        <li>SATURDAY<br>19:45</li>
        <li>SATURDAY<br>20:15</li>
        <li>SATURDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing sun-listings">
        <li>SUNDAY<br>14:45</li>
        <li>SUNDAY<br>16:30</li>
        <li>SUNDAY<br>18:10</li>
        <li>SUNDAY<br>20:35</li>
        <li>SUNDAY<br>21:15</li>
        <li>SUNDAY<br>22:45</li>
      </ul>
    </div>
  </div>
  <div class="classic-movie">
    <div class="movie-summary">
      <div class="movie-image">
        <img src="images/movie-images/first-blood.jpg" class="movie-thumbnail">
      </div>
      <div class="movie-name-plot">
        <h1>First Blood (1982)</h1>
        <p>John Rambo is a disoriented Vietnam Vet. He is hitchhiking from town to town to see friends from the war. A sheriff tries to make him leave town and when he refuses, arrests him for vagrancy. While in jail, a deputy takes delight in abusing him.
          Rambo escapes showing his old Vietnam fighting skills and takes to the woods as the sheriff and deputies try and find him in his element. Things get out of hand as Colonel Trautman, Rambo's old commander, appears to shed light on the situation.</p>
        <p><span class="white-mini-header">Starring:</span>Sylvester Stallone, Brian Dennehy, Richard Crenna</p>
        <p><span class="white-mini-header">Runtime:</span>93 min</p>
      </div>
    </div>
    <div class="movie-showtimes">
      <ul class="movie-timing mon-listings">
        <li>MONDAY<br>10:45</li>
        <li>MONDAY<br>13:30</li>
        <li>MONDAY<br>17:00</li>
        <li>MONDAY<br>18:45</li>
        <li>MONDAY<br>20:15</li>
        <li>MONDAY<br>22:00</li>
      </ul>
      <ul class="movie-timing tue-listings">
        <li>TUESDAY<br>13:50</li>
        <li>TUESDAY<br>15:10</li>
        <li>TUESDAY<br>17:30</li>
        <li>TUESDAY<br>20:00</li>
        <li>TUESDAY<br>21:30</li>
        <li>TUESDAY<br>22:50</li>
      </ul>
      <ul class="movie-timing wed-listings">
        <li>WEDNESDAY<br>14:45</li>
        <li>WEDNESDAY<br>16:30</li>
        <li>WEDNESDAY<br>18:10</li>
        <li>WEDNESDAY<br>20:35</li>
        <li>WEDNESDAY<br>21:15</li>
        <li>WEDNESDAY<br>22:45</li>
      </ul>
      <ul class="movie-timing thu-listings">
        <li>THURSDAY<br>11:20</li>
        <li>THURSDAY<br>14:45</li>
        <li>THURSDAY<br>16:50</li>
        <li>THURSDAY<br>18:00</li>
        <li>THURSDAY<br>19:45</li>
        <li>THURSDAY<br>22:15</li>
      </ul>
      <ul class="movie-timing fri-listings">
        <li>FRIDAY<br>10:45</li>
        <li>FRIDAY<br>13:10</li>
        <li>FRIDAY<br>15:45</li>
        <li>FRIDAY<br>18:25</li>
        <li>FRIDAY<br>20:30</li>
        <li>FRIDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing sat-listings">
        <li>SATURDAY<br>13:15</li>
        <li>SATURDAY<br>14:30</li>
        <li>SATURDAY<br>18:10</li>
        <li>SATURDAY<br>19:45</li>
        <li>SATURDAY<br>20:15</li>
        <li>SATURDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing sun-listings">
        <li>SUNDAY<br>14:45</li>
        <li>SUNDAY<br>16:30</li>
        <li>SUNDAY<br>18:10</li>
        <li>SUNDAY<br>20:35</li>
        <li>SUNDAY<br>21:15</li>
        <li>SUNDAY<br>22:45</li>
      </ul>
    </div>
  </div>
  <div class="classic-movie">
    <div class="movie-summary">
      <div class="movie-image">
        <img src="images/movie-images/breakfast-club.jpg" class="movie-thumbnail">
      </div>
      <div class="movie-name-plot">
        <h1>The Breakfast Club (1985)</h1>
        <p>They were five students with nothing in common, faced with spending a Saturday detention together in their high school library. At 7 a.m., they had nothing to say, but by 4 p.m., they had bared their souls to each other and become good friends.
          To the outside world they were simply a Brain, an Athlete, a Basket Case, a Princess, and a Criminal, but to each other, they would always be the Breakfast Club.</p>
        <p><span class="white-mini-header">Starring:</span>Emilio Estevez, Judd Nelson, Molly Ringwald</p>
        <p><span class="white-mini-header">Runtime:</span>97 min</p>
      </div>
    </div>
    <div class="movie-showtimes">
      <ul class="movie-timing mon-listings">
        <li>MONDAY<br>13:15</li>
        <li>MONDAY<br>14:30</li>
        <li>MONDAY<br>18:10</li>
        <li>MONDAY<br>19:45</li>
        <li>MONDAY<br>20:15</li>
        <li>MONDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing tue-listings">
        <li>TUESDAY<br>13:50</li>
        <li>TUESDAY<br>15:10</li>
        <li>TUESDAY<br>17:30</li>
        <li>TUESDAY<br>20:00</li>
        <li>TUESDAY<br>21:30</li>
        <li>TUESDAY<br>22:50</li>
      </ul>
      <ul class="movie-timing wed-listings">
        <li>WEDNESDAY<br>10:45</li>
        <li>WEDNESDAY<br>13:10</li>
        <li>WEDNESDAY<br>15:45</li>
        <li>WEDNESDAY<br>18:25</li>
        <li>WEDNESDAY<br>20:30</li>
        <li>WEDNESDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing thu-listings">
        <li>THURSDAY<br>11:20</li>
        <li>THURSDAY<br>14:45</li>
        <li>THURSDAY<br>16:50</li>
        <li>THURSDAY<br>18:00</li>
        <li>THURSDAY<br>19:45</li>
        <li>THURSDAY<br>22:15</li>
      </ul>
      <ul class="movie-timing fri-listings">
        <li>FRIDAY<br>10:45</li>
        <li>FRIDAY<br>13:10</li>
        <li>FRIDAY<br>15:45</li>
        <li>FRIDAY<br>18:25</li>
        <li>FRIDAY<br>20:30</li>
        <li>FRIDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing sat-listings">
        <li>SATURDAY<br>13:15</li>
        <li>SATURDAY<br>14:30</li>
        <li>SATURDAY<br>18:10</li>
        <li>SATURDAY<br>19:45</li>
        <li>SATURDAY<br>20:15</li>
        <li>SATURDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing sun-listings">
        <li>SUNDAY<br>14:45</li>
        <li>SUNDAY<br>16:30</li>
        <li>SUNDAY<br>18:10</li>
        <li>SUNDAY<br>20:35</li>
        <li>SUNDAY<br>21:15</li>
        <li>SUNDAY<br>22:45</li>
      </ul>
    </div>
  </div>
  <div class="classic-movie">
    <div class="movie-summary">
      <div class="movie-image">
        <img src="images/movie-images/halloween.jpg" class="movie-thumbnail">
      </div>
      <div class="movie-name-plot">
        <h1>Halloween (1979)</h1>
        <p>The year is 1963, the night: Halloween. Police are called to 43 Lampkin Ln. only to discover that 15 year old Judith Myers has been stabbed to death, by her 6 year-old brother, Michael. After being institutionalized for 15 years, Myers breaks
          out on the night before Halloween. No one knows, nor wants to find out, what will happen on October 31st 1978 besides Myers' psychiatrist, Dr. Loomis. He knows Michael is coming back to Haddonfield, but by the time the town realizes it, it'll
          be too late for many people.</p>
        <p><span class="white-mini-header">Starring:</span>Donald Pleasence, Jamie Lee Curtis, Tony Moran</p>
        <p><span class="white-mini-header">Runtime:</span>91 min</p>
      </div>
    </div>
    <div class="movie-showtimes">
      <ul class="movie-timing mon-listings">
        <li>MONDAY<br>14:45</li>
        <li>MONDAY<br>16:30</li>
        <li>MONDAY<br>18:10</li>
        <li>MONDAY<br>20:35</li>
        <li>MONDAY<br>21:15</li>
        <li>MONDAY<br>22:45</li>
      </ul>
      <ul class="movie-timing tue-listings">
        <li>TUESDAY<br>13:30</li>
        <li>TUESDAY<br>15:00</li>
        <li>TUESDAY<br>18:00</li>
        <li>TUESDAY<br>18:15</li>
        <li>TUESDAY<br>21:30</li>
        <li>TUESDAY<br>22:15</li>
      </ul>
      <ul class="movie-timing wed-listings">
        <li>WEDNESDAY<br>16:30</li>
        <li>WEDNESDAY<br>17:00</li>
        <li>WEDNESDAY<br>19:45</li>
        <li>WEDNESDAY<br>20:00</li>
        <li>WEDNESDAY<br>21:45</li>
        <li>WEDNESDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing thu-listings">
        <li>THURSDAY<br>12:30</li>
        <li>THURSDAY<br>13:30</li>
        <li>THURSDAY<br>15:15</li>
        <li>THURSDAY<br>16:15</li>
        <li>THURSDAY<br>19:00</li>
        <li>THURSDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing fri-listings">
        <li>FRIDAY<br>16:30</li>
        <li>FRIDAY<br>17:00</li>
        <li>FRIDAY<br>19:45</li>
        <li>FRIDAY<br>20:00</li>
        <li>FRIDAY<br>21:45</li>
        <li>FRIDAY<br>22:30</li>
      </ul>
        <ul class="movie-timing sat-listings">
          <li>SATURDAY<br>14:45</li>
          <li>SATURDAY<br>16:30</li>
          <li>SATURDAY<br>18:10</li>
          <li>SATURDAY<br>20:35</li>
          <li>SATURDAY<br>21:15</li>
          <li>SATURDAY<br>22:45</li>
        </ul>
        <ul class="movie-timing sun-listings">
          <li>SUNDAY<br>12:30</li>
          <li>SUNDAY<br>13:30</li>
          <li>SUNDAY<br>15:15</li>
          <li>SUNDAY<br>16:15</li>
          <li>SUNDAY<br>19:00</li>
          <li>SUNDAY<br>22:30</li>
        </ul>
    </div>
  </div>
  <div class="classic-movie">
    <div class="movie-summary">
      <div class="movie-image">
        <img src="images/movie-images/goodfellas.jpg" class="movie-thumbnail">
      </div>
      <div class="movie-name-plot">
        <h1>Goodfellas (1990)</h1>
        <p>Henry Hill might be a small time gangster, who may have taken part in a robbery with Jimmy Conway and Tommy De Vito, two other gangsters who might have set their sights a bit higher. His two partners could kill off everyone else involved in the
          robbery, and slowly start to think about climbing up through the hierarchy of the Mob. Henry, however, might be badly affected by his partners' success, but will he consider stooping low enough to bring about the downfall of Jimmy and Tommy?</p>
        <p><span class="white-mini-header">Starring:</span>Robert De Niro, Ray Liotta, Joe Pesci</p>
        <p><span class="white-mini-header">Runtime:</span>146 min</p>
      </div>
    </div>
    <div class="movie-showtimes">
      <ul class="movie-timing mon-listings">
        <li>MONDAY<br>12:25</li>
        <li>MONDAY<br>13:30</li>
        <li>MONDAY<br>14:50</li>
        <li>MONDAY<br>17:35</li>
        <li>MONDAY<br>20:15</li>
        <li>MONDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing tue-listings">
        <li>TUESDAY<br>13:50</li>
        <li>TUESDAY<br>15:10</li>
        <li>TUESDAY<br>17:30</li>
        <li>TUESDAY<br>20:00</li>
        <li>TUESDAY<br>21:30</li>
        <li>TUESDAY<br>22:50</li>
      </ul>
      <ul class="movie-timing wed-listings">
        <li>WEDNESDAY<br>10:45</li>
        <li>WEDNESDAY<br>13:10</li>
        <li>WEDNESDAY<br>15:45</li>
        <li>WEDNESDAY<br>18:25</li>
        <li>WEDNESDAY<br>20:30</li>
        <li>WEDNESDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing thu-listings">
        <li>THURSDAY<br>11:20</li>
        <li>THURSDAY<br>14:45</li>
        <li>THURSDAY<br>16:50</li>
        <li>THURSDAY<br>18:00</li>
        <li>THURSDAY<br>19:45</li>
        <li>THURSDAY<br>22:15</li>
      </ul>
      <ul class="movie-timing fri-listings">
        <li>FRIDAY<br>10:45</li>
        <li>FRIDAY<br>13:10</li>
        <li>FRIDAY<br>15:45</li>
        <li>FRIDAY<br>18:25</li>
        <li>FRIDAY<br>20:30</li>
        <li>FRIDAY<br>21:50</li>
      </ul>
      <ul class="movie-timing sat-listings">
        <li>SATURDAY<br>13:15</li>
        <li>SATURDAY<br>14:30</li>
        <li>SATURDAY<br>18:10</li>
        <li>SATURDAY<br>19:45</li>
        <li>SATURDAY<br>20:15</li>
        <li>SATURDAY<br>22:30</li>
      </ul>
      <ul class="movie-timing sun-listings">
        <li>SUNDAY<br>14:45</li>
        <li>SUNDAY<br>16:30</li>
        <li>SUNDAY<br>18:10</li>
        <li>SUNDAY<br>20:35</li>
        <li>SUNDAY<br>21:15</li>
        <li>SUNDAY<br>22:45</li>
      </ul>
    </div>
  </div>
</div>

这就是您想要实现的方式吗？

无论如何，我希望它会有所帮助。

编辑:我添加了在页面加载时打开的当天列表，因为我觉得这很酷。

关于javascript - 尝试根据用户点击动态隐藏/显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49555973/

javascript - 尝试根据用户点击动态隐藏/显示 div

上一篇：javascript - Fancytree打开了，怎么默认全部选中？

下一篇：javascript - addEventListener 到多个元素，使用事件委托(delegate) (JavaScript)