用于php会话的活动会话中的菜单列表的方法

时间:2017-06-02 16:38:56

标签: javascript php jquery css html5

如何删除ul li元素上的活动类, 我只是简单的设计广告如何用php中的php会话实现这个方法?

代码示例



$(document).ready(function() {
  $('li').on('click', function() {
    $(this).addClass('active');
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.menu {
  background-color: #1C90F3;
  width: 200px;
  height: 100%;
  color: whitesmoke;
  float: left
}

.main {
  width: calc(100% - 200px);
  height: 100%;
  float: left;
  background-color: white
}

.content {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(50px);
  padding: .5em;
  font-size: 2em;
  text-align: center;
  color: dimgray;
  border-radius: 3px;
  border-style: dashed;
}

.submenu {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .3s;
}

li {
  list-style: none;
  padding: 5px;
  cursor: pointer;
}

.list {
  background-color: #176cb2;
  transition: background-color .3s;
}

.list:hover {
  background-color: #114e7f;
}

.list-submenu {
  padding-left: 20px;
  background-color: #2795EE;
  transition: background-color .3s;
}

.list-submenu:hover {
  background-color: #114e7f;
}

.active {
  background-color: #114e7f;
}

.active+ul {
  max-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li class="list">list one</li>
  <ul class="submenu">
    <li class="list-submenu">sub one - list one</li>
    <li class="list-submenu">sub two - list one</li>
    <li class="list-submenu">sub three - list one</li>
  </ul>
  <li class="list">list two</li>
  <ul class="submenu">
    <li class="list-submenu">sub one - list two</li>
    <li class="list-submenu">sub two - list two</li>
    <li class="list-submenu">sub three - list two</li>
  </ul>
  <li class="list">list tree</li>
  <ul class="submenu">
    <li class="list-submenu">sub one - list three</li>
    <li class="list-submenu">sub two - list three</li>
    <li class="list-submenu">sub three - list three</li>
  </ul>
</ul>
<div class="main">
  <div class="content">
    content here
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

这个例子。正在调用您的会话并获取密钥stat,如果stat等于1,var stat将为TRUE,否则将FALSE将使用stat的值条件:

$(document).ready(function() {
     var  stat = <? $_SESSION['stat'] == 1 ? true : false; ?>
      $('li').on('click', function() {

       stat ? $(this).addClass('active'); : $(this).removeClass('active'); 

      });
    });