Javascript - 使元素可单击并切换其他按钮

时间:2017-02-03 11:16:42

标签: javascript toggle

如何使加号/减号可点击?现在不行...... 如果单击第二个按钮打开,如何关闭另一个按钮(下拉列表)?

JAVASCRIPT

$(".dropbtn").append('<span class="adl-signs">&nbsp;+</span>');

function ctaDropMenu(e) {
  e.target.nextElementSibling.classList.toggle("show");
}

function toggleSigns(e) {
  $(e.target).find('.adl-signs').html(function(_, html) {
    return $.trim(html) == '&nbsp;+' ? '&nbsp;-' : '&nbsp;+';
  });
}

$(".dropbtn").click( function(e) {
  ctaDropMenu(e)
  toggleSigns(e)
});

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

FIDDLE = https://jsfiddle.net/neuhaus3000/jf1zetLw/8/

1 个答案:

答案 0 :(得分:1)

以下是更新后的fiddle。我试图尽可能简化你的代码,并尽可能地使用jQuery。

Main

如果您有任何问题,请告诉我。感谢。