如何創建一個圖標，只需在點擊時向下旋轉

Question

我製作了一個帶圖標的slideToggle菜單，當用戶單擊圖標時，它會向下旋轉，但是當我單擊其中一個圖標時，所有圖標旋轉。如何只旋轉點擊圖標，而不是全部？

$(document).ready(function() { 
 
    // toggle slide down nav 
 
    $('.nav-sidebar ul:has(li)').addClass('sub-menu'); 
 

 
    $('.dropmenu').on('click', function() { 
 
    $(this).next('.sub-menu').slideToggle(200); 
 
    $(this).parent().siblings().children().next().slideUp(); 
 
    return false; 
 
    }); 
 
    // arrow rotate 
 
    $('.dropmenu').on('click', function() { 
 
    // $('.dropmenu').removeClass('openmenu'); 
 
    // $(this).addClass('openmenu'); 
 
    if ($('.dropmenu').hasClass('openmenu')) { 
 
     $('.dropmenu').removeClass('openmenu'); 
 
    } else { 
 
     $('.dropmenu').addClass('openmenu'); 
 
    } 
 
    }); 
 
});

.nav-sidebar { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav-sidebar>li>a, 
 
.sub-menu>li>a { 
 
    display: block; 
 
    color: #838F9A; 
 
    text-transform: capitalize; 
 
    padding: 0 30px; 
 
    line-height: 3.5em; 
 
} 
 
.sub-menu>li>a { 
 
    line-height: 2.5em; 
 
} 
 
.nav-sidebar>li>a:hover, 
 
.nav-sidebar>li>a:focus, 
 
.sub-menu>li>a:hover, 
 
.sub-menu>li>a:focus { 
 
    color: #4FC1E9; 
 
} 
 
.dropmenu:after { 
 
    font-family: 'FontAwesome'; 
 
    font-size: 16px; 
 
    content: "\f105"; 
 
    vertical-align: middle; 
 
    float: right; 
 
    margin-right: -10px; 
 
    transition: all .3s ease; 
 
} 
 
.openmenu:after { 
 
    -ms-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.sub-menu { 
 
    display: none; 
 
    list-style: none; 
 
    padding: 10px 30px; 
 
    margin: 0; 
 
    background-color: #1D232B; 
 
    position: relative; 
 
} 
 
.open-menu>.sub-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<ul class="nav-sidebar"> 
 
    <li> 
 
    <a href="javascript:void(0);" class="dropmenu">Place</a> 
 
    <ul> 
 
     <li><a href="place.php">Published</a> 
 
     </li> 
 
     <li><a href="schedule.php">Schedule</a> 
 
     </li> 
 
     <li><a href="my-place.php">My Place</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="javascript:void(0);" class="dropmenu">Place</a> 
 
    <ul> 
 
     <li><a href="place.php">Published</a> 
 
     </li> 
 
     <li><a href="schedule.php">Schedule</a> 
 
     </li> 
 
     <li><a href="my-place.php">My Place</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

外部的例子，我做了：https://jsfiddle.net/y6adghh3/

Answer 1

$(document).ready(function() { 
 
    // toggle slide down nav 
 
    $('.nav-sidebar ul:has(li)').addClass('sub-menu'); 
 

 
    $('.dropmenu').on('click', function() { 
 
    $(this).toggleClass('openmenu');// arrow rotate 
 
    $(this).next('.sub-menu').slideToggle(200); 
 
    $(this).parent().siblings().children().removeClass('openmenu').next().slideUp(); 
 
    return false; 
 
    }); 
 
    
 
});

.nav-sidebar { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav-sidebar>li>a, 
 
.sub-menu>li>a { 
 
    display: block; 
 
    color: #838F9A; 
 
    text-transform: capitalize; 
 
    padding: 0 30px; 
 
    line-height: 3.5em; 
 
} 
 
.sub-menu>li>a { 
 
    line-height: 2.5em; 
 
} 
 
.nav-sidebar>li>a:hover, 
 
.nav-sidebar>li>a:focus, 
 
.sub-menu>li>a:hover, 
 
.sub-menu>li>a:focus { 
 
    color: #4FC1E9; 
 
} 
 
.dropmenu:after { 
 
    font-family: 'FontAwesome'; 
 
    font-size: 16px; 
 
    content: "\f105"; 
 
    vertical-align: middle; 
 
    float: right; 
 
    margin-right: -10px; 
 
    transition: all .3s ease; 
 
} 
 
.openmenu:after { 
 
    -ms-transform: rotate(90deg); 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.sub-menu { 
 
    display: none; 
 
    list-style: none; 
 
    padding: 10px 30px; 
 
    margin: 0; 
 
    background-color: #1D232B; 
 
    position: relative; 
 
} 
 
.open-menu>.sub-menu { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<ul class="nav-sidebar"> 
 
    <li> 
 
    <a href="javascript:void(0);" class="dropmenu">Place</a> 
 
    <ul> 
 
     <li><a href="place.php">Published</a> 
 
     </li> 
 
     <li><a href="schedule.php">Schedule</a> 
 
     </li> 
 
     <li><a href="my-place.php">My Place</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="javascript:void(0);" class="dropmenu">Place</a> 
 
    <ul> 
 
     <li><a href="place.php">Published</a> 
 
     </li> 
 
     <li><a href="schedule.php">Schedule</a> 
 
     </li> 
 
     <li><a href="my-place.php">My Place</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

你在.on('click'功能選擇$('.dropmenu')是選擇頁面上的任何元素與類dropmenu。你需要確保它只選擇被點擊的元素。幸運的是，您可以通過this引用點擊元素。

下面的代碼應該工作：

$(document).ready(function() { 
    // toggle slide down nav 
    $('.nav-sidebar ul:has(li)').addClass('sub-menu'); 

    $('.dropmenu').on('click', function() { 
    $(this).next('.sub-menu').slideToggle(200); 
    $(this).parent().siblings().children().next().slideUp(); 
    return false; 
    }); 
    // arrow rotate 
    $('.dropmenu').on('click', function() { 
    if ($(this).hasClass('openmenu')) { 
     $(this).removeClass('openmenu'); 
    } else { 
     $(this).addClass('openmenu'); 
    } 
    }); 
}); 

Answer 3

只要改變click處理程序，以參考使用「這個」的點擊的元素。

$('.dropmenu').on('click', function() { 
    if ($(this).hasClass('openmenu')) { 
     $(this).removeClass('openmenu'); 
    } else { 
     $(this).addClass('openmenu'); 
    } 
    }); 
});