Question

我有jQuery侧面菜单切换。

＆＃13;

$('#open').click(function() {
  $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
  $('.sidebar').toggleClass('active');
})

$(document).click(function(e) {
  var sidebar = $(".sidebar, #open");

  if (!sidebar.is(e.target) && sidebar.has(e.target).length === 0) {
    $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
    sidebar.removeClass('active');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="topHeaderMenu leftMenu listMenu" id="open">
  <div class="listMenuDiv"><i class="glyphicon2 glyphicon-align-justify"></i></div>
</li>

<div class="sidebar">
  sidebar content
</div>

＆＃13;

因此，当我点击#open时，边栏将会打开。
问题是如果侧栏打开，如何glyphicon-align-justify更改为glyphicon-remove如果侧边栏关闭，请将glyphicon-remove设为glyphicon-align-justify以及如何在文档点击上保留glyphicon-align-justify（如果我点击外部/正文，它将更改为glyphicon-remove）

Answer 1

替换你的剧本

$('#open').click(function()
    {
        $(this).find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
        $('.sidebar').toggleClass('active');
    })

    $(document).click(function(e)
    {
  if($(".sidebar.active").length > 0){


        var sidebar = $(".sidebar, #open");

        if(!sidebar.is(e.target) && sidebar.has(e.target).length === 0)
        {
            $('#open').find('i').toggleClass('glyphicon-align-justify').toggleClass('glyphicon-remove');
            sidebar.removeClass('active');
        }
     }

    });

单击jQuery侧面菜单切换更改gyphicon

1 个答案: