我可以做些什么来减少我的点击事件代码？

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。但是我们不希望每次单击菜单项时下拉菜单都会切换。为了防止这种情况，我在.dropAns 的处理程序中添加了stopPropagation()。见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>

Answer 2

我发现管理这样的内容部分显示的最简单方法是将它们放在一个公共容器中，然后使用 CSS 来控制在父级中显示哪个子部分。

查看下面的代码，我首先添加了一个父 <div> 和一个 id 的“contentSections”：

<div id="contentSections">
    . . . 
</div>

之后，我将里面每个“容器”div 部分的默认样式设置为display: none;：

#contentSections .container {display: none;}

现在，通过该设置，您可以更改父级上的类（我添加了一个与计时的菜单项的 ID 匹配的类），并设置 CSS 样式以显示应为的内容部分显示，当类应用于父级时，使用此模式：

<p class="dropAns" id="MENU_ID">MENU_TEXT</p>

#contentSections.MENU_ID #SECTION_ID {display: block;}

一旦每个菜单项/内容部分配对都为其设置了 CSS，只需在单击菜单项时使用适当的类更新父容器即可：

$(".dropAns").on('click', function(e) {
    $("#contentSections")[0].className = e.target.id;
});

注意：还有很多其他的事情我要清理（例如，可以在没有 jQuery 的情况下完成，可以重构 id 和 class 属性的使用以整理代码等），但我不想做太多更改，以至于代码会变得不熟悉。这应该让您了解其背后的概念。

---

更新 #1： 忘记默认“contentSections”以显示“欢迎”内容。向父容器添加了一个默认的“wel”类来处理它。

//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
$(".dropAns").on('click', function(e) {
  $("#contentSections")[0].className = e.target.id;
});

#contentSections .container {display: none;}
#contentSections.wel #welcome {display: block;}
#contentSections.me #aboutMe {display: block;}
#contentSections.port #portfolio {display: block;}
#contentSections.yubby #tubez {display: block;}
#contentSections.contact #cont {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" 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>
<div id="contentSections" class="wel">
  <div class="container" id="welcome">**Welcome content**</div>
  <div class="container" id="aboutMe">**About Me content**</div>
  <div class="container" id="portfolio">**Portfolio content**</div>
  <div class="container" id="tubez">**YouTube content**</div>
  <div class="container" id="cont">**Contact content**</div>
</div>