0
ul
li
要素の 要素を取り除く方法私はちょうど簡単なデザインの広告をどのようにPHPの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>