Question

我基本上想要一个管理工具栏，它会有一个可以点击显示的按钮（adminbarplus），点击它会滑动工具栏并滑动adminbarplus，因为管理工具栏有自己的隐藏按钮（adminbarminus）。但是，我需要默认隐藏条形图并添加内联HTML以显示无效，因为它默认情况下替换为display：block。

这是我的HTML：

<div class="row adminbar" id="adminbar" style="display: none;">
    <div class="row adminbaroverlay">
            <div class="large-2 columns">
                <div class="row valign-middle">
                    <div class="large-12 columns content2 adminbarsidebar">
                        <%= image_tag('admintitle.png') %>
                    </div>
            </div>
        </div>
        <div class="large-9 columns">
            <div class="row valign-middle">
                <div class="large-12 columns adminbarsidebar">
            <p class="margin0b padding0b margin0t padding0t"><span class="adminbutton">Manage Users</span>
            <span class="adminbutton">Manage Branches</span>
            <span class="adminbutton">Manage News</span></p>                    
                </div>
            </div>
        </div>
        <div class="large-1 columns adminarrow" id="adminbarminus">
            <div class="row valign-middle">
                <div class="large-12 columns adminbarsidebar text-center">
                    <a href="#"><%= image_tag('minusicon.png') %></a>
                </div>
            </div>
        </div>
    </div>
</div>

<span class="adminbarplus">ADMIN BAR</span>

这是我的jquery：

             $("#adminbarminus").click(function(){
                $("#adminbar").slideUp();
                $(".adminbarplus").slideDown();
             });

             $(".adminbarplus").click(function(){
                $("#adminbar").slideDown();
                $(".adminbarplus").slideUp();
             });

非常感谢一些帮助，谢谢。

Answer 1

         $("#adminbar").click(function(){
            $("#adminbar").slideUp();
            $(".adminbarplus").slideDown();
         });

         $(".adminbarplus").click(function(){
            $("#adminbar").slideDown();
            $(".adminbarplus").slideUp();
         });

你给错了身份....... http://jsfiddle.net/z817oy53/

Answer 2

强烈建议您不要将jquery用于动画或类似的东西，只需使用CSS3过渡或动画，并仅使用jQuery来切换类。

<div id="bar">
    <span class="minus">minus</span>
</div>

<span class="plus">plus</span>

<style>
    #bar{
        transition: transform .5s ease;
        transform: translateY(-100%);
    }
    #bar.isActive{
        transform: translateY(0%);
    }
</style>

<script>

   $(function(){

       var bar = $("#bar"),
           plus = $(".plus"),
           minus = $(".minus");

       plus.click(function(){
           bar.addClass("isActive");
       });
       minus.click(function(){
           bar.removeClass("isActive");
       });

   });
</script>

Jquery显示无默认不起作用

2 个答案: