隐藏滑动侧边栏并更改图标onclick

Question

我已经习惯了以下代码

// Code goes here

function toggleMenu(){
  
  $('.menu_sample').toggleClass('hide');
  $('.content').toggleClass('pushed');
}

/* Styles go here */

.menu_sample {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  border: solid 1px;
  transition: transform 0.1s ease-out;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 10px;
  transition: left 1s ease-out;
  margin-left: -2%;
  margin-top: 150%;
}

/*transition*/
.top_mar {
    margin-top: 25%;
}

/* on toggle*/
.content.pushed {
  left: 225px;
}

.hide {
  transform:translateX( -100px);
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="menu_sample top_mar">
    <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li>
              <span style="color:blue; font-weight:bold;">Dashboards</span>
            </li>     
	 
           <li><a href="#" target="iframe_a">One</a></li>
            <li><a href="#" target="iframe_a">Two</a></li>
            <li><a href="#" target="iframe_a">Three</a></li>
          </ul>
   </div>
</div>

<div class="content pushed top_mar"> 
      <button onclick="toggleMenu()">
        <span id="menu-button">
          <span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
        </span>
  </button>
</div>
        
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%"  height="95%" name="iframe_a" frameborder="0"></iframe>
</div>

显示并隐藏onclick

我可以显示和隐藏按钮的onclick。我的要求是当我点击该按钮时它的图标应该改变，如果我点击侧边栏（侧边栏项目）边栏应该隐藏。任何人都可以改进我的脚本来实现它。

Answer 1

＆＃13;

＆＃13;

$(document).ready(function(){
  $('.sidebar').on('click','a',function(e){
     var href = $(this).attr('href');
     $('iframe').attr('src', href);
     e.preventDefault();
     //console.log(e.target);
     toggleMenu();
   })
});
   
   
function toggleMenu(){          
    $('.menu_sample').toggleClass('hide');
    $('.content').toggleClass('pushed');
    $('#menu-button').find('.glyphicon')
      .toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
}

＆＃13;

  /* Styles go here */

    .menu_sample {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100px;
      height: 100%;
      border: solid 1px #eee;
      transition: transform 0.1s ease-out;
    }

    .content {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      padding: 10px;
      transition: left 1s ease-out;
      margin-left: -2%;
      margin-top: 150%;
    }

    /*transition*/
    .top_mar {
        margin-top: 5%;
    }

    /* on toggle*/
    .content.pushed {
      left: 225px;
    }

    .hide {
      transform:translateX( -100px);
    } 

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <div class="menu_sample top_mar">
        <div class="col-sm-3 col-md-2 sidebar">
              <ul class="nav nav-sidebar">
                <li>
                  <span style="color:blue; font-weight:bold;">Dashboards</span>
                </li>     
    	 
               <li><a href="#" target="iframe_a">One</a></li>
                <li><a href="#" target="iframe_a">Two</a></li>
                <li><a href="#" target="iframe_a">Three</a></li>
              </ul>
       </div>
    </div>

    <div class="content pushed top_mar"> 
          <button class="btn btn-default" onclick="toggleMenu()">
            <span id="menu-button">
              <span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
            </span>
      </button>
    </div>
            
    <div style="margin-left:-2%; margin-top:5%; height: 625px;" >
    <iframe width="100%"  height="95%" name="iframe_a" frameborder="0"></iframe>
    </div>

＆＃13;

＆＃13;

＆＃13;