Question

我在页面上有一个slidePanelExtender和3个图标。当用户点击向下箭头时，我希望它改变向上箭头并打开滑动面板。如果单击向上箭头时滑动面板打开，我希望它更改回向下箭头。

页面上的

图标位于以下代码中：

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-chevron-left" style="float: right; font-size: medium; color:#34495e"></span>



<asp:CollapsiblePanelExtender ID="slidePanelExtender" runat="Server" TargetControlID="contentAdSearch"
                        ExpandControlID="titleAdSearch" CollapseControlID="titleAdSearch" Collapsed="True"
                        SuppressPostBack="False" BehaviorID="slidePanelBehavior" />
                    <div class="adsearchbar">
                        <asp:Panel ID="titleAdSearch" runat="server" CssClass="titleAdSearch" onClick="changeArrow();">
                            <span class="glyphicon glyphicon-chevron-down" style="float: right;
                                    font-size: medium" id="arrow"></span>

                        </asp:Panel>

我将以下jquery代码写入onClick事件。

 function changeArrow() {
        if ($('.glyphicon').hasClass('glyphicon-chevron-down')) {
            $('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
        }
        else if ($('.glyphicon').hasClass('glyphicon-chevron-up')) {
            $('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
        }

但它将所有图标更改为向上箭头图标，因为他们的类也是'glyphicon'。我该怎么办才能改变目标图标？

Answer 1

如果您无法仅为该图标组成选择器，请向其添加内容（通常是类或ID），以便您可以。例如，您可以添加类向上箭头，然后：

$('.iconUpDown').click(function () {
   //  ^  common class 
    $(this).toggleClass('glyphicon-chevron-down glyphicon-chevron-up);
 });

：注意其实我不知道你是如何约束事件的，但是尝试这样做

Answer 2

如果你只想更改图标，你必须重置它的css属性..每当你toggleClass，它也会重置所有其他样式..然后是prefentDefault（）;防止所有默认点击行为

$('.glyphicon').click(function (event) {
    $(this).css('', '');

    event.preventDefault();
});

Answer 3

试试这个：

function changeArrow(elem) {
        if ($(elem).find('.glyphicon').hasClass('glyphicon-chevron-down')) {
            $(elem).find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
        }
        else if ($(elem).find('.glyphicon').hasClass('glyphicon-chevron-up')) {
            $(elem).find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
        }

并使用onclick=changeArrow(this)

如何仅更改目标图标OnClick？

3 个答案: