Question

我正在为有三张图片的页面制作手风琴菜单。第一张图像（5k / 10k）应该在单击时显示/隐藏图像下方的ul。第二张图像，半程马拉松，点击时应该向上/向下滑动ul。第三张图片，全程马拉松，在点击时应该淡出/退出ul。不应该同时显示两个ul。我遇到这个问题，你能帮忙吗？这是HTML：

<!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" />
</head>
<body>
    <div id="header">
        <h1>Fox Valley Runners Club</h1>
    </div> <!-- End of 'header' div-->

    <div id="main">
    </div>  <!-- End of 'main' div-->

    <div id="pics">

        <div class="race_box">
            <img src="images/run1.jpg" /><br />
            <figcaption>5k/10k Events</figcaption>

            <div class="races" id="5k">
                <h3>5k/10 Events</h3>
                <ul>
                    <li>Mini Sprint</br>10/30/17</br>Memorial Park</br>
                        Appleton</li>
                    <li>Iron Horse</br>11/06/17</br>Bay Beach Park</br>Green Bay</li>
                    <li>Twilight Trail</br>11/13/17</br>River's Edge Park</br>Wrightstown</li>
                </ul>
            </div><!--  End of '5k' div-->
        </div> <!-- End of 'run1' div-->

        <div class="race_box">
            <img src="images/run2.jpg" /><br />
            <figcaption>Half Marathon Events</figcaption>

            <div class="races" id="half">
                <h3>Half Marathon Events</h3>
                <ul>
                    <li>Fox River Marathon 10/15/17</br>Pierce Park</br>Appleton</li>
                    <li>N.E.W. Half Marathon 10/29/17</br>Bay Beach Park</br>Green Bay</li>
                    <li>Winnebago Run 11/27/17</br>Menominee Park</br>Oshkosh</li>
                </ul>
            </div> <!-- End of 'half' div-->
        </div><!-- End of 'run2' div-->

        <div class="race_box">
            <img src="images/run3.jpg" /><br />
            <figcaption>Full Marathon Events</figcaption>

        <div class="races" id="full">
            <h3>Full Marathon Events</h3>
            <ul>
                <li>Cheesehead Marathon 9/24/17</br>Pamperin Park</br>Green Bay</li>
                <li>Chain O'Lakes Marathon 10/29/17</br>Bay Beach Park</br>Green Bay</li>
                <li>Fox Cities Marathon 11/12/17</br>Menominee Park</br>Oshkosh</li>
            </ul>
        </div> <!-- End of 'full' div-->
        </div> <!-- End of 'run3' div-->

    </div> <!-- End of 'pics' div-->
    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_scripts.js"></script>
</body>
</html>

到目前为止，这是Javascript。我知道这不是很多，但我一直在尝试不同的事情而且从头开始：

$(document).ready(function(){
    var accordian = $('.race_box');

    accordian.find('.races').hide();

    $('.race_box').click(function(){
        $('#5k').toggle(); 
    });
});

更新了Javascript尝试：

$(document).ready(function(){
    var accordian = $('.race_box');

    accordian.find('.races').hide();

   accordian.find('.race_box').on('click', function(){
   $(this).next('.races').slideToggle(); 
   });

   /*$('.race_box').click(function(){
   $('#5k').slideToggle(); 
   });*/
});

更新：仍未能解决这个问题。仍然在努力

有没有人对我能做什么有任何建议？

Answer 1

点击一个race_box，隐藏所有比赛类，然后找到下一场比赛并显示它。希望这会有所帮助...

<!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" />


</head>
<body>
    <div id="header">
        <h1>Fox Valley Runners Club</h1>
    </div> <!-- End of 'header' div-->

    <div id="main">
    </div>  <!-- End of 'main' div-->

    <div id="pics">

        <div class="race_box" data-toggle="slideToggle">
            <img src="images/run1.jpg" /><br />
            <figcaption>5k/10k Events</figcaption>

            <div class="races" id="5k">
                <h3>5k/10 Events</h3>
                <ul>
                    <li>Mini Sprint</br>10/30/17</br>Memorial Park</br>
                        Appleton</li>
                    <li>Iron Horse</br>11/06/17</br>Bay Beach Park</br>Green Bay</li>
                    <li>Twilight Trail</br>11/13/17</br>River's Edge Park</br>Wrightstown</li>
                </ul>
            </div><!--  End of '5k' div-->
        </div> <!-- End of 'run1' div-->

        <div class="race_box" data-toggle="toggle">
            <img src="images/run2.jpg" /><br />
            <figcaption>Half Marathon Events</figcaption>
            <div class="races" id="half">
                <h3>Half Marathon Events</h3>
                <ul>
                    <li>Fox River Marathon 10/15/17</br>Pierce Park</br>Appleton</li>
                    <li>N.E.W. Half Marathon 10/29/17</br>Bay Beach Park</br>Green Bay</li>
                    <li>Winnebago Run 11/27/17</br>Menominee Park</br>Oshkosh</li>
                </ul>
            </div> <!-- End of 'half' div-->
        </div><!-- End of 'run2' div-->

        <div class="race_box" data-toggle="fadeToggle">
            <img src="images/run3.jpg" /><br />
            <figcaption>Full Marathon Events</figcaption>

        <div class="races" id="full">
            <h3>Full Marathon Events</h3>
            <ul>
                <li>Cheesehead Marathon 9/24/17</br>Pamperin Park</br>Green Bay</li>
                <li>Chain O'Lakes Marathon 10/29/17</br>Bay Beach Park</br>Green Bay</li>
                <li>Fox Cities Marathon 11/12/17</br>Menominee Park</br>Oshkosh</li>
            </ul>
        </div> <!-- End of 'full' div-->
        </div> <!-- End of 'run3' div-->

    </div> <!-- End of 'pics' div-->
    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_scripts.js"></script>


<script>
        $(document).ready(function(){
        //var accordian = $('.race_box');
        $('.races').hide();

        $('.race_box').click(function(){
            console.log($(this));
           //$('.races').hide();
            //console.log($(this).find('.races')) ;
            var method = $(this).attr("data-toggle");
            console.log(method);
            var nextRace = $(this).find('.races');
            //nextRace.show(); 
            switch(method) {
                case "slideToggle" :
                    nextRace.slideToggle(1000);
                break;
                case "toggle" :
                    nextRace.toggle(1000);
                break;
                case "fadeToggle" :
                    nextRace.fadeToggle(1000);
                break;            

            }


        });
});
</script>
</body>
</html>

Answer 2

由于你想在每个android:fillViewport="true"上使用不同的显示/隐藏方法，我认为最简单的方法就是有三种不同的点击功能。代码并不优雅，但它易于阅读。

基本方法是：

点击图片，
使用适当的方法 - ul，.toggle()或.slideToggle() - 来显示匹配列表，然后
检查是否有其他列表可见，如果是，请使用适当的方法隐藏它们。

我最初会用CSS隐藏所有列表，而不是使用JavaScript。这样，在JavaScript运行之前，您不必担心列表可能会在页面加载时显示一瞬间。

最后一点，与JS无关：对于你的换行标记，只需执行.fadeToggle()，或者，如果要包含斜杠，请将其设为<br>。 <br/>是无效的HTML。

＆＃13;

</br>

＆＃13;

$(document).ready(function() {

  var fiveK = document.getElementById('5k'),
      half = document.getElementById('half'),
      full = document.getElementById('full');

  var fiveKImg = $(fiveK).prev().prev().prev(),
      halfImg = $(half).prev().prev().prev(),
      fullImg = $(full).prev().prev().prev();

  $(fiveKImg).on('click', function() {
    $(fiveK).toggle();

    if ($(half).is(':visible')) {
      $(half).slideToggle();
    }
    if ($(full).is(':visible')) {
      $(full).fadeToggle();
    }
  });

  $(halfImg).on('click', function() {
    $(half).slideToggle();

    if ($(fiveK).is(':visible')) {
      $(fiveK).toggle();
    }
    if ($(full).is(':visible')) {
      $(full).fadeToggle();
    }
  });

  $(fullImg).on('click', function() {
    $(full).fadeToggle();

    if ($(fiveK).is(':visible')) {
      $(fiveK).toggle();
    }
    if ($(half).is(':visible')) {
      $(half).slideToggle();
    }
  });

});

＆＃13;

.races {
  display: none;
}

＆＃13;

如何在同一个手风琴菜单上使用不同的方法？

2 个答案: