Javascript 选择当前图元并单击更改值

我是Javascript新手，我一直在尝试编写一段代码，在单击属性元素时更改属性值和样式。我有这个代码，我希望当你点击“

”它会变成“

”。。。在它里面，是“

”更改为“

”：

单击时，应如下所示：

<li class="has-sub show">
  <a href="#" role="menuitem">Hi</a>
  <ul class="sub-menu m-sub" style="display: block;">
    <li>
      <a href="#" role="menuitem">Hi</a>
    </li>
  </ul>
  <div class="submenu-toggle"></div>
</li>

我自己做了尝试，并尝试将此放置：

<script type='text/javascript'>
  $(document).ready(function change() {
    $(this).attr('has-sub','has-sub show');
    $(this > ul).css('display','block');
  })
</script>

$（文档）.ready（函数更改（）{
$（this.attr（'has-sub'，'has-sub show'）；
$（this>ul）.css（'display'，'block'）；
})

并使用“onclick”调用函数：

但我还没能做到

---

感谢您的帮助：）

首先，您需要在

上添加click listener。has sub

之后，您可以添加class

show

• 您需要添加类

  show

  。它不是一个属性
• 只需使用

  .has sub>ul

  即可获得

  ul

  ，它是

  .has sub

  的直接子级

$（文档）.ready（函数更改（）{
//$（this.attr（“has sub”，“has sub show”）；
$（“.has sub”）。单击（函数（）{
$（this.addClass（“show”）；
$（“.has sub>ul”）.css（“显示”、“块”）；
});
});






您可以将其用作单击处理程序，然后可以在单击“change（）；”

---

您可以使用父类切换应用了

display:none

的类<代码>$（this）.children（'ul'）.toggleClass（'hide'）将以类hide为目标，然后使用

toggleClass（）

在单击时切换其类。默认情况下，在HTML

子菜单

元素上设置

隐藏

类

$（文档）.ready（函数（）{
$（'.has sub'）。在（'click'，function（）上{
$（this.children（'ul'）.toggleClass（'hide'））
})
})

.hide{
显示：无；
}

<script type='text/javascript'>
  $(document).ready(function change() {
    $(this).attr('has-sub','has-sub show');
    $(this > ul).css('display','block');
  })
</script>

<li class="has-sub" onclick"change();">

$(document).ready(function() {
  $(".has-sub > a").on("click", function() {
    // here you can use
    // - $(this).parent() to do something with the li.has-sub
    // - $(this).next("ul") to do something with the ul.sub-menu
  });
});