Question

我的网页上有简单的侧面导航，我认为使用javascript代码没什么问题。我需要的？当用户打开该页面并选择查看“ Audi”类别中的内容时，在这种情况下将显示子类别（audi a4和audi a5）。现在已设置为“打开”，因此用户无需单击“奥迪”类别即可查看内容。

document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            schedulerLicenseKey: '<hidden>',
            plugins: ['interaction', 'resourceTimeline'],
            resourceLabelText: 'Resources',
            resources: "<see fullcalendar support docs>",
            events: "<see fullcalendar support docs>",
            resourceRender: function (renderInfo) {
                renderInfo.el.addEventListener("click", function () { console.log('clicked:' + renderInfo.resource.id); });
            }
        });
        calendar.render();
    });

我该如何解决问题？

Answer 1

尝试使用此Sidebar Dropdown code example，希望对您有所帮助。

使用引导程序，您可以在这些事情上节省很多时间。

对于标签<a>，请使用this

Answer 2

您应该将Audi用作父项，如果要添加子项，则应在子项的CSS代码中添加display:none;。之后，您可以使用javascript或jquery进行点击事件。

$(function(){
$(".has-child-title").click(function(){
$(this).next("ul").toggle();
});
});

  .children{
    display:none;
    }
    li{
    cursor: pointer;
    }
    *{
    font-family: sans-serif;
    }

  
  <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>
</head>
<body>
  <h4>Side navigation</h4>
    <nav class="checklist side-nav-toggle ajax">
    <ul>
    <li class="has-child">
      <h5 class="has-child-title"><a>Audi</a></h5>
      <ul class="children scroll-list">
      <li><a href="#" rel="nofollow">Audi A3</a></li>
      <li><a href="#" rel="nofollow">Audi A5</a></li>
      </ul>
    </li>
    
    <li>
    <h5><a>Mercedes</a></h5>
    </li>
    </ul>
    </nav>

</body>
</html>

在此处输入代码

Answer 3

<h4>Side navigation</h4>
    <nav class="checklist side-nav-toggle ajax">
        <h5><a href="#" class="opened">Audi</h5>

        <ul class="scroll-list" style="display:block;">
          <li><a href="#" rel="nofollow">Audi A3</a></li>
          <li><a href="#" rel="nofollow">Audi A5</a></li>
        </ul>
    </nav>

如果<ul class="scrill-list" style="display: block;">出现问题，那么如果我们删除style="display: block;，那么我们将关闭导航，但是如果我们离开此行代码，则导航将在页面加载时打开。

如何修复“ onClick显示内容”？

3 个答案: