jquery 选择器的问题

Question

想做一个左侧导航栏 jquery 如何能选中 点击元素的子元素
点击menu_item的时候让icon-arrow-up旋转
现在我点击一个 两个都转

<ul class="menubar">
    <li class="menu_item">
        <div class="menu_item_title">
            <div>
                <i class="menu_icon iconfont icon-wendang"></i>
                <span>导航一</span>
            </div>
            <i class="iconfont icon-arrow-up"></i>
        </div>
    </li>
    <li class="menu_item">
        <div class="menu_item_title">
            <div>
                <i class="menu_icon iconfont icon-wendang"></i>
                <span>导航一</span>
            </div>
            <i class="iconfont icon-arrow-up"></i>
        </div>
    </li>
</ul>

大佬们看下 怎么实现
我的点击事件：

$(".menu_item_title").click(function () {
    $(".icon-arrow-up").toggleClass("arrowActive")
})

Answer 1

我的想法是这样，你试试，就更改了你的点击事件：

$(".menu_item_title").click(function () {
    $(this).find(".iconfont").toggleClass("arrowActive");
})

Answer 2

$(document).on("click",".menu_item",function(){
    let _this = $(this)
    let obj = _this.find('.icon-arrow-up')
    //使其旋转代码...more code
})

如果要加个状态，可以给每个元素添加一个data-text或者class来判断他的状态。

Answer 3

因为你的选择器有问题，你可以用$(this)来确定的选择到你想要的元素，可以把点击事件写成

$(".menu_item_title").click(function(){
    $(this).children("i.icon-arrow-up").toggleClass("arrowActive");
})

Answer 4

$(".menu_item_title").click(function () {
    $(this).find(".icon-arrow-up").toggleClass("arrowActive")
})

Answer 5

$(".menu_item_title").click(function () {
    $(this).find(".icon-arrow-up").toggleClass("arrowActive")
})

这个this就是你当前点击的，并且找到 icon-arrow-up 切换类名

Answer 6

$('.menu_item_title').click(function() {
    $(this).children('.icon-arrow-up').toggleClass('arrowActive')
})