Question

我希望内容显示然后当我点击它向上滑动的箭头时它会隐藏它，当它们再次点击它时它会向下滑动它。这是我的代码到目前为止，但这只是在不降低它的情况下继续提升它。

的Javascript

    $(document).ready(function(){

$("#a_main_content").hide();
$('.arrow').click(function(){

$("#a_main_content").slideToggle();
$(".arrow").show();
});

var value = 180
$(".arrow").rotate({ 
   bind: 
     { 
        click: function(){
            value +=180;
            $(this).rotate({ animateTo:value})
        }
     } 

});

});

HTML

    <!Doctype>
<head>
  <!-- <link type="text/css" href="style/style.css" rel="stylesheet" /> -->
  <link rel="stylesheet" type="text/css" href="style/style.css?<?php echo time(); ?>" />    

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery/jQueryRotate.js"></script>
<script src="jquery/Box_Toggle.js"></script>

</head>

<body>
     <div id="main_header">  
     <div id="main_header_wrapper">
     <img src="images/logo.png" alt="Chattrd"/>

     <nav id="navigation"><b>
     <a href="#" class="nav_icon">Home</a>
     <a href="#" class="nav_icon">Forum</a>
     <a href="#" class="nav_icon">Login</a>
     <a href="#" class="nav_icon">Register</a>
     </b></nav>

     </div>
     </div>

     <div id="content_background">
     <div id="content_header">
     <b> Announcements </b>
     <img src="images/arrow.png" class="arrow">
     </div>
     <div id="a_main_content">
     <center><b><u>We are coming very soon</u></b></center>
     Please stand by, we are coming soon
     </div>
     </div>
</body>
</html>

单击箭头时向上滑动

0 个答案: