Что я могу сделать, чтобы уменьшить количество кодов событий моего клика?

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

Я рекомендую присвоить каждому элементу меню атрибут данных .
Затем использовать атрибут данных выбранного элемента, чтобы выбрать идентификатор нужного контейнера.

Однако, поскольку .dropAns элементы являются потомками .dropdown, нажатие на .dropAns означает, что вы также нажимаете .dropdown.Но мы не хотим, чтобы раскрывающийся список переключался при каждом нажатии на пункт меню.Чтобы предотвратить это, я добавил stopPropagation() в обработчик на .dropAns.См. Событие пузыри и захвата .

// 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 для управления тем, какой дочерний раздел отображается внутри родительского элемента.

Lookingв приведенном ниже коде я сначала начал с добавления родительского <div> с id для «contentSections»:

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

После этого я установил стиль по умолчанию для каждого из «контейнеров» div разделов внутри, чтобы быть display: none;:

#contentSections .container {display: none;}

Теперь, с этой настройкой, вы можете изменить класс на родительском (я добавил класс, который соответствует идентификатору пункта меню, который был синхронизирован) и настроить 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", чтобы показывать контент "Welcome".Для обработки этого добавлен класс по умолчанию «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>