Question

我在我的混合应用上使用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类样式。

是否有可能抓住那个事件并完成我想做的事情？

Answer 1

对于延迟感到抱歉，以下是仅在悬停事件中将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选择器。

希望这会有所帮助。如果您有任何疑问，请告诉我。很乐意提供帮助。

Answer 2

嗨是的，这是可能的。使用HTML和Javascript本身。您也可以使用JQUERY DOM操作来实现此目的。让我知道您想知道哪一个。

Answer 3

我稍微修改了你的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;
            }

我希望这会有所帮助。

根据其他类css样式处理类的css样式

3 个答案: