javascript - 为什么我不能在 Div 的 onclick 函数中使用 Jquery show() 函数而不使用数据 data-toggle ="dropdown"

Question

我有一个div，它的作用类似于按钮。单击此 div，将显示另一个隐藏的 div。我现在的问题是它没有按预期工作。我将数据 data-toggle="dropdown" 属性放在像按钮一样的 div 中。为什么是这样？

这是我的代码:

function showsleevepanel() {
  $('.option-panel').hide();
  $('#sleeve-options-panel').show();
}

#sleeve-options-panel {
  width: 17rem;
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onclick="showsleevepanel()" class="card col-md-12 d-flex align-items-center justify-content-center mx-auto mb-2" data-toggle="dropdown">
  <img class="menuIcon" id="menuIcon_sleeve" src="//cdn1.tailorstore.com/ui/emerald/choices/26/sleeve/3.svg"></img>
  <span>Sleeve</span>
</div>

Answer 1

虽然问题不是很清楚，也许你可以像下面这样用 toggle() 实现你正在寻找的东西(不使用 data-toggle 属性) :

function showsleevepanel() {
  $('.option-panel').toggle();
  $('#sleeve-options-panel').toggle();
}

#sleeve-options-panel {
  width: 17rem;
  display: none
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div onclick="showsleevepanel()" class="card col-md-12 d-flex align-items-center justify-content-center mx-auto mb-2" >
  <img class="menuIcon" id="menuIcon_sleeve" src="//cdn1.tailorstore.com/ui/emerald/choices/26/sleeve/3.svg"></img>
  <span>Sleeve</span>
</div>
 
<div class="option-panel">option-panel</div>
<div id="sleeve-options-panel">sleeve-options-panel</div>