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>

每次我在drowndown上进行选择时，我都希望它显示该选择的特定容器，而无需在我的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>

如何减少我的点击事件代码？

2 个答案: