Question

我想根据用户的down事件将V形符号从up更改为onClick。我尝试过使用其他人的其他样本但是没有成功。

这是我的JSFiddle。

Answer 1

嗯，你在设置JSFiddle方面遇到了一些问题，但我认为这些问题是你的实际问题的次要问题。

最简单的方法是使用.toggleClass()（我假设您使用jQuery，因为您使用$(document).ready()并将其包含在您的小提琴中）。

您可以使用此类(className, switch)签名来添加或删除类：

 $(element).toggleClass("myClass", false) // Removes myClass
 $(element).toggleClass("myOtherClass", true) // Adds myOtherClass

因此，如果您在var change = true中添加.ready()，则可以执行以下操作，以便在每次点击时切换两个字形：

function toggle_caret() {
    $("#caret1").toggleClass("glyphicon-chevron-up", change);
    $("#caret1").toggleClass("glyphicon-chevron-down", !change);
    change = !change
}

Demo

＆＃13;

var change = true;
$(document).ready(function () {
    $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active');
    });
});

function toggle_caret() {
    $("#caret1").toggleClass("glyphicon-chevron-up", change);
    $("#caret1").toggleClass("glyphicon-chevron-down", !change);
    change = !change
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span>&nbsp;&nbsp;Dashboard<span class="sr-only">(current)</span></a>
                </li>
                <li onclick="toggle_caret()"><a href="#" data-toggle="collapse" data-target="#sub1"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;Requisition<small><span style="float:right" id="caret1" class="glyphicon glyphicon-chevron-down"></span></small></a>
                </li>
                <ul class="nav collapse" id="sub1">
                    <li><a href="#"><span class="glyphicon glyphicon-file"></span>&nbsp;&nbsp;Form</a>
                    </li>
                    <li class="nav-divider"></li>
                    <li><a href="#">Status</a>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-ok"></span>&nbsp;&nbsp;Approved</a>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;Rejected</a>
                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-refresh"></span>&nbsp;&nbsp;In Process</a>
                    </li>
                </ul>
            </ul>
            <ul class="nav nav-sidebar">
                <li class="nav-divider"></li>
                <li><a href="#"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;Search</a>
                </li>
            </ul>
        </div>

＆＃13;

点击事件更改雪佛龙

1 个答案: