Question

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MainDesign.master.cs" Inherits="Web_Assignment.MainDesign" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Master Design</title>
    <link href="stylesheets/mainstyle.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" type="image/x-icon" href="images/de_tour_ico.ico" />
    <script>
        var slide = function (div) {
            if ($(div).css('display') === 'none') {
                $(div).delay(300).slideToggle(500);
                return false;
            } else {
                $(div).delay(300).slideToggle(500);
                return false;
            }
        }
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="logobox">
                <img class="bottom" src="images/de_tour_hover.png" />
                <img class="top" src="images/de_tour.png" />
            </div>
            <div class="searchdiv">
            </div>
        </div>
        <div class="sidebar">
            <a href="#" onclick="slide('#div1');">Login</a>
            <div id="div1" style="display: none">
                this will show
            </div><hr />
            <ul>
                <li onclick="location.href='#'"><a href="#">Home</a></li>
                <li onclick="location.href='#'"><a href="#">About</a></li>
                <li onclick="location.href='#'"><a href="#">Gallery</a></li>
                <li onclick="location.href='#'"><a href="#">Contact</a></li>
            </ul>
        </div>
        <div class="container"><asp:ContentPlaceHolder ID="ContentPlaceHolder" runat="server"></asp:ContentPlaceHolder></div>
    </div>
</body>
</html>

我想知道为什么每次点击“＃34;登录＆＃34;”时都不会切换幻灯片。一直在搜索并尝试将其整理好几天。

我想在slided-div中添加一个id：和密码：并且可能会在每次＆＃34;登录＆＃34;再次点击。

Answer 1

确保首先包含jQuery库！并改变如下的jquery代码。

<script type='text/javascript'>

      function slide(div) {

            if ($(div).is(':hidden')) {
                $(div).delay(300).slideToggle(500);
                return false;
            } else {
                $(div).delay(300).slideToggle(500);
                return false;
            }
        } 

</script>

你可以在这里看到演示---＆gt; http://jsfiddle.net/Junkie/36ueV/

Answer 2

她为你： http://jsfiddle.net/2EqCT/

就像你看到的那样，切换效果很好别忘了添加jquery lib;）

$('a#foryu').click( function() { slide('#div1'); return false; } );

function slide(div) {
            console.log("test");
            if ($(div).css('display') === 'none') {
                $(div).slideToggle(500);
                return false;
            } else {
                $(div).slideToggle(500);
                return false;
            }
        }

和请:)考虑从你的js代码而不是从html标签调用函数（JavaScript function in href vs. onclick）

JQuery.SlideToggle（）不起作用

2 个答案: