javascript - 我可以采取什么措施来减少我的点击事件代码？

Question

我无法将我的点击事件组合在一起，因为它们似乎可以压缩，我仍然无法弄清楚如何正确组织它

我的JS

 $(".container").hide();

  $("#welcome").show();
  //for phone add an on click event for .dropdown, and pust display:show for .dropdown-content
  $(".dropdown").click(function() {
    $(".dropdown-content").toggle();
  });

  // add click event for .dropdown-content
  //click for #wel
  $("#wel").click(function() {
    $(".container").hide();
    show: $("#welcome").show();
  });
  // if #me clicked hide: $(".container").hide();, main page we'll implement later, and show: $("#aboutMe").show();
  $("#me").click(function() {
    $(".container").hide();
    show: $("#aboutMe").show();
  });
  // else if #port clicked hide: $(".container").hide();, main page we'll implement later, and show: $("#portfolio").show();
  $("#port").click(function() {
    $(".container").hide();
    show: $("#portfolio").show();
  });
  //else if youtube clicked
  $("#yubby").click(function() {
    $(".container").hide();
    show: $("#tubez").show();
  });
  // else if #contact clicked hide: $(".container").hide();, main page we'll implement later, and show: $("#contact").show();
  $("#contact").click(function() {
    $(".container").hide();
    show: $("#cont").show();
  });

我的html

 <nav class="dropdown">
            <p class="animated pulse" id="pimp"> Juan Alberto Pimentel JR
            </p>
            <div class="dropdown-content">
                <p class="dropAns" id="wel">Welcome</p>
                <p class="dropAns" id="me">About Me</p>
                <p class="dropAns" id="port">Portfolio</p>
                <p class="dropAns" id="yubby">Youtube</p>
                <p class="dropAns" id="contact">Contact</p>
            </div>
        </nav>
<br>
<div class="container" id="welcome"></div>
<br>
<div class="container" id="aboutMe"></div>
<br>
<div class="container" id="portfolio"></div>
<br>
<div class="container" id="tubez"></div>
<br>
<div class="container" id="cont"></div>

每次我在下拉列表中进行选择时，我希望它显示该选择的特定容器，而无需在我的 js 上添加所有这些代码行

Answer 1

我建议给每个菜单项一个 data attribute .
然后使用单击的项目的 data 属性来选择所需容器的 id。

但是，由于 .dropAns 元素是 .dropdown 的后代，因此单击 .dropAns 意味着您也单击 .dropdown。但我们不希望每次单击菜单项时都会切换下拉菜单。为了防止这种情况，我添加了 stopPropagation()到 .dropAns 上的处理程序。请参阅Event bubbling and capture .

// toggle the menu on click
$(".dropdown").on('click', function() {
  $(".dropdown-content").toggle();
});

// toggle content
$(".dropAns").on('click', function(e) {

  // prevent event from bubbling up to .dropdown
  e.stopPropagation();

  // get the data attribute from the clicked item
  var id = $(this).data('id');

  // hide all containers
  $(".container").hide();

  // show the appropriate container
  $('#' + id).show();

});

#pimp {
  font-weight: bold;
  color: darkblue;
  cursor: pointer;
}

.dropAns {
  cursor: pointer;
  margin: 0;
}

.container {
  margin: 1em 0 0;
  padding: 1em;
  background-color: lightblue;
  display: none;
}

#welcome {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="dropdown">
  <p class="animated pulse" id="pimp">Juan Alberto Pimentel JR</p>
  <div class="dropdown-content">
    <p class="dropAns" data-id="welcome">Welcome</p>
    <p class="dropAns" data-id="aboutMe">About Me</p>
    <p class="dropAns" data-id="portfolio">Portfolio</p>
    <p class="dropAns" data-id="tubez">Youtube</p>
    <p class="dropAns" data-id="cont">Contact</p>
  </div>
</nav>

<div class="container" id="welcome">Welcome!</div>
<div class="container" id="aboutMe">About Me!</div>
<div class="container" id="portfolio">Portfolio!</div>
<div class="container" id="tubez">YouTube!</div>
<div class="container" id="cont">Contact!</div>