Question

我试图确保在单击ID为#open-sidebar的按钮时使用侧边栏打开（使用show（）。并且，如果单击ID为#close-sidebar的按钮，则关闭/隐藏（）我创建了以下函数来实现它：这些功能不起作用？

function showSidebar() {
  $('#open-sidebar').show();
}

function hideSidebar() {
  $('#close-sidebar').hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
  <!-- Close button for sidebar -->
  <button id="close-sidebar" class="btn-square pull-right sidebar-control" onclick="hideSidebar()">
          <i class="fa fa-close"></i>
       </button>
  <h2><i class="fa fa-globe"></i> Cities</h2>
  <ul id="citylist" class="list-group">
    <li>India</li>
  </ul>
</nav>

<header id="mainview-header" class="header topbar text-white">
  <!-- Menu button for opening the sidebar -->
  <button id="open-sidebar" class="btn-square pull-left sidebar-control" onclick="showSidebar()">
         <i class="fa fa-bars"></i>
      </button>
  <h1 id="city" class="pull-left text-center city">Berlin</h1>
  <div class="clear"></div>
</header>
<div id="icon">
  <img id="iconimage" src="img/rain.png" alt="weather">
</div>
<div id="summary" class="text-center">Rain in the afternoon</div>
<div id="temperature" class="text-center">11° C</div>

Answer 1

您需要捕获打开和关闭按钮上的click事件，并将显示和隐藏功能应用于边栏本身：

// showSidebar
$('#open-sidebar').click(function() {
  $('#sidebar').show();
});
$('#close-sidebar').click(function() {
  $('#sidebar').hide();
});

Answer 2

不要将内联与事件处理程序混合使用。你差点就吃了。

要添加事件处理程序，请按上述使用

$('#open-sidebar').click(showSidebar);
$('#close-sidebar').click(hideSidebar);

function showSidebar() {
  alert('show')
}

function hideSidebar() {
  alert('hide')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
html code for reference.

<nav id="menu">
  <!-- Close button for sidebar -->
  <button id="close-sidebar" class="btn-square pull-right sidebar-control">
      <i class="fa fa-close">close</i>
   </button>
  <h2><i class="fa fa-globe"></i> Cities</h2>
  <ul id="citylist" class="list-group">
    <li>India</li>
  </ul>
</nav>

<header id="mainview-header" class="header topbar text-white">
  <!-- Menu button for opening the sidebar -->
  <button id="open-sidebar" class="btn-square pull-left sidebar-control">
     <i class="fa fa-bars">open</i>
  </button>
  <h1 id="city" class="pull-left text-center city">Berlin</h1>
  <div class="clear"></div>
</header>
<div id="icon">
  <img id="iconimage" src="img/rain.png" alt="weather">
</div>
<div id="summary" class="text-center">Rain in the afternoon</div>
<div id="temperature" class="text-center">11° C</div>

供下面的内联使用

function showSidebar() {
  alert('show')
}

function hideSidebar() {
  alert('hide')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
html code for reference.

<nav id="menu">
  <!-- Close button for sidebar -->
  <button id="close-sidebar" class="btn-square pull-right sidebar-control" onclick='hideSidebar()'>
      <i class="fa fa-close">close</i>
   </button>
  <h2><i class="fa fa-globe"></i> Cities</h2>
  <ul id="citylist" class="list-group">
    <li>India</li>
  </ul>
</nav>

<header id="mainview-header" class="header topbar text-white">
  <!-- Menu button for opening the sidebar -->
  <button id="open-sidebar" class="btn-square pull-left sidebar-control" onclick='showSidebar()'>
     <i class="fa fa-bars">open</i>
  </button>
  <h1 id="city" class="pull-left text-center city">Berlin</h1>
  <div class="clear"></div>
</header>
<div id="icon">
  <img id="iconimage" src="img/rain.png" alt="weather">
</div>
<div id="summary" class="text-center">Rain in the afternoon</div>
<div id="temperature" class="text-center">11° C</div>

Answer 3

您使用了错误的选择器。您要隐藏并显示 导航栏 而不是按钮：

function showSidebar() {
    $('#menu').show();
}
function hideSidebar() {
    $('#menu').hide();
}

如何使用jQuery“ show（）”或“ hide（）”显示/隐藏内容

3 个答案: