我在我的混合应用程序上使用Framework7插件的导航抽屉。抽屉可以使用按钮打开/关闭,也可以向左/向右滑动。
现在,当导航抽屉打开时,类<div class="panel panel-left panel-reveal">
添加了另一个类,即active
类。所以打开时:<div class="panel panel-left panel-reveal active ">
关闭时:<div class="panel panel-left panel-reveal>
基于该事件,是否可以将样式添加到其他类?示例是此类:<div class="views">
到<div class="views" style="opacity: 0.5">
要完成的任务:当抽屉打开时,类view
将添加样式,当抽屉关闭时删除view
类样式。
有可能赶上那个事件并完成我想做的事情吗?
很抱歉延迟了,下面是在悬停事件中将css类添加到div的示例代码。我只使用了html和css。(无DOM操作)。
<!doctype html>
<html>
<head>
<style>
a.ex1:hover{color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;}
.open-close{ display: none;}
a.ex6:hover .open-close{display: block;}
</style>
</head>
<body>
<p>
<a class = "ex1" href="#"> This link changes color </a>
</p>
<p>
<a class = "ex2" href="#"> This link changes font-size </a>
</p>
<p>
<a class = "ex3" href="#"> This link changes background-color </a>
</p>
<p>
<a class = "ex4" href="#"> This link changes font-family </a>
</p>
<p>
<a class = "ex5" href="#"> This link changes text-decoration </a>
</p>
<p>
<a class = "ex6" href="#">
<div>This link displays another div by detecting change in class</div>
<div class="open-close">
Here you can add your content to hide/show/modify elements based on the classes
</div>
</a>
</p>
</body>
</html>
注意-只需记住根据HTML结构使用适当的CSS选择器。
希望这能有所帮助。如果你有任何问题,请告诉我。很乐意帮忙。
嗨,是的,有可能。使用HTML和Javascript本身。您也可以使用JQUERY DOM操作来实现这一点。让我知道你想知道哪一个。
我修改了你的HTML一点
<div class="panel-overlay"></div>
<div class="panel panel-left panel-reveal">Just to see if his appears in green on fire of a single common event</div> <!---it adds "active class" e.g. <div class="panel panel-left panel-reveal active"> -->
<div class="views"> Just to see if this appears in red on fire of a single common event<!--this should toggle change background, i mean add background color when class panel has active class then remove the bgcolor when active class remove (vise versa) -->
<div class="view view-main" data-page="home">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<button onclick="myFunction()" type="button" class="open-panel fa fa-bars button-nav"> I am button 1</button>
</div>
<div class="center" style="left: -6.5px;"></div>
<div class="right">
<button type="button" id="refresh" class="button-nav"> <i class="el el-refresh"></i> I am button 2</button>
</div>
</div>
</div>
<div class="page-content">
<div class="content-block"> content here... </div>
</div>
</div>
</div>
</div>
</div>
只要添加这个JavaScript函数,你就可以开始了。
function myFunction(){
$(".panel-reveal").addClass("active");
if($(".panel-reveal").hasClass("active")) {
$(".views").addClass("change")
}
}
CSS将是
.active{
background-color: green !important;
}
.change{
background-color: red !important;
}
我希望这能有所帮助。