0

我希望内容显示，然后当我单击箭头时它会向上滑动以隐藏它，当他们再次单击它时它会向下滑动。到目前为止，这是我的代码，但这只是不断地提出它而不把它降低。

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>
4

0 回答 0