Question

我无法将链接（由图像表示，并且在页面的左侧）实际上有效地导致div（包含句子，并在中心）显示/单击链接时隐藏。

这是我的代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="practice">
<meta name="keywords" content="practice">
<title>Practice</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_regular.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="js/top_javascript.js"></script>
<script type="text/javascript" src="js/jquery_rollover.js"></script>
<script type="text/javascript" src="js/jquery_slideout.js"></script>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet/top_style.css" type="text/css" media="all">
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body onLoad="fontSizeChg(0);">
    <div id="top_wrapper">

        <div id="top_main_box">
        <div id="slide">
            <div id="top_main_l_box">

                <div id="top_main_logo"><img src="image/title.png" alt=""></div>

                <ul id="top_main_navi_1">
                    <li id="about"><a><img src="image/about.png" alt="" class="rollover"></a></li>
                    <li><a><img src="image/member.png" alt="" class="rollover"></a></li>
                    <li><a><img src="image/photo.png" alt="" class="rollover"></a></li>
                    <li><a><img src="image/links.png" alt="" class="rollover"></a></li>
                    <li><a><img src="image/contact.png" alt="" class="rollover"></a></li>
                </ul>



            </div>
            <div id="about_this">
                    This is all the things about our page
            </div>

            <div id="top_main_r_box">

                <div id="top_main_catch"><img src="image/catch.png" alt=""></div>

            </div>
                <div id="slideout" class="showbg"><img src="image/slideout.png"></div>
                <div id="slidein" class="showcont"><img src="image/slidein.png"></div>

            <br class="c_clear">
        </div>
        </div>

这是我的CSS：

#about{
}

#about_this{
    position: fixed;
    top: 200px;
    left: 500px;
}

这是我的JQuery：

$('#about').toggle(function () {
    $('#about_this').hide();
}, function () {
    $('#about_this').show();
});

提前致谢！

Answer 1

使用此

 <script>
 $(document).ready(function(){
   $("#about").click(function(){
        $("#about_this").toggle();
   });
 });
 </script>

也使用最新版本的jQuery

Answer 2

你必须先添加一个actionlistener

$("#about_this").click(function(){
    $("#about_this").toggle();
});

Answer 3

切换不是一个事件，但它是一种方法：http://api.jquery.com/toggle/

只需将您的JQuery代码更改为：

$('#about').click(function () {
    $('#about_this').toggle();
});

如果你使用的是JQuery版本的Post 1.7，你应该像这样使用click事件：

$('#about').on("click", function () {
    $('#about_this').toggle();
});

检查您的JQuery版本：

if (typeof jQuery != 'undefined') {  
    // jQuery is loaded => print the version
    alert(jQuery.fn.jquery);
}

Answer 4

如果我正确理解了这一点，你最初会隐藏#about_this，所以将其设置为在CSS中显示none，然后在单击时使其可见，再次单击时不可见。除了点击，您还可以使用悬停。

 #about_this{
    position: fixed;
    top: 200px;
    left: 500px;
    display:none;
  }


$('#about').on('click', function(){
   $('#about_this').toggle();
}

Answer 5

使用.hide()

时，您无需运行.show()和.toggle()

以下是选项

的示例

$("#about").click(function() { $("#about_this").toggle("slow",function(){ //Animation complete. }); });

使用JQuery Show / Hide来隐藏/显示div，但点击按钮没有效果

5 个答案:

检查您的JQuery版本：