javascript - 我该如何减少点击事件代码？

我在将点击事件组合在一起时遇到了麻烦，因为它们看起来像是可以压缩的，所以我仍然不知道如何正确组织它

我的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>

每当我在drowndown上进行选择时，我都希望它显示该选择的特定容器，而在我的js中没有所有这些代码行

最佳答案

我建议给每个菜单项一个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>