JAVASCRIPT

Question

如何仅在点击的按钮上进行减号/加号切换？如何使其可点击（现在不是）...

JAVASCRIPT

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

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

function toggleSigns() {
  $(".adl-signs").html(function(_, html) {
    return $.trim(html) == '+' ? '-' : '+';
  });
}

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

// 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');
      }
    }
  }
}

https://jsfiddle.net/neuhaus3000/jf1zetLw/4/

Answer 1

更改这两个函数：

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

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

尝试为元素使用不同的id值。两个div得到 id =“myDropdown”。

Answer 2

为什么不简化并使用css添加+而不是jQuery？

.dropbtn:after{
    content: '+';
}

.dropbtn.open:after{
    content: '-';
}

然后，您只需切换open

上的.dropbtn课程即可

$(".dropbtn").click( function(e) {
    e.target.classList.toggle("open");
    e.target.nextElementSibling.classList.toggle("show");
});

参见分叉的jsFiddle：[Link]（https://jsfiddle.net/e1x10ae6/）

要回答为什么更改两个按钮上的+/-符号，您为两个跨度提供了相同的类：$(".dropbtn").append('<span class="adl-signs">+</span>');然后在toggleSigns函数中选择了该类的所有实例（{{ 1}}）当您使用以下选择器.adl-signs并更改了所有符号时。

Answer 3

在每个按钮上添加一个唯一的Unchecked cast from ParentException to T，如下所示：

id

然后使用该ID来指定要更改的按钮

<button id="1" class="dropbtn">Click Me</button>

在$(".dropbtn").click( function(e) { var btn_id = $(this).attr('id'); //get button id ctaDropMenu(e) toggleSigns(btn_id) });功能上，使用ID选择按钮

toggleSigns

更新了小提琴：jsfiddle

Answer 4

正如Veve所说，你正在使用课堂进行切换。但是，如果您传递this（被点击的元素），您可以定位正在使用的按钮。

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

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

更新小提琴：https://jsfiddle.net/jf1zetLw/7/

e：用真正的小提琴更新：/

只在点击的按钮上设置减号/加号...？

JAVASCRIPT

4 个答案: