Fatal编程技术网
  • jquery/
  • jquery链接在单击后死亡

jquery链接在单击后死亡

jquery hyperlink

jquery链接在单击后死亡,jquery,hyperlink,click,Jquery,Hyperlink,Click,因此，在大多数情况下，我的jquery工作正常，除了隐藏和显示时socbar的转换。除此之外，我最大的问题是，一旦我的socbar崩溃，要扩展的链接就会失效，直到页面刷新为止。我的代码怎么了 我的jscript: $(".socbar").hide().before("<div class='social_button'></div>"); $(".social_button").click(function(){ var $link = $(this); $link.n

因此，在大多数情况下，我的jquery工作正常，除了隐藏和显示时socbar的转换。除此之外，我最大的问题是，一旦我的socbar崩溃，要扩展的链接就会失效，直到页面刷新为止。我的代码怎么了

我的jscript:

$(".socbar").hide().before("<div class='social_button'></div>");
$(".social_button").click(function(){
var $link = $(this);
$link.next().show("slow");
$link.remove();
return false;
});
$(".arrow").click(function(){
$(".socbar").hide().before("<div class='social_button'></div>");
return false;
});

<!DOCTYPE HTML>
 <html>

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Test Page</title>

 <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
 </head>



 <body>

<div class="container clearfix">

    <div class="navbar_container grid_5">
        <div id="navbar">
            <div class="nav_container grid_2 omega">
                <div class="socbar">
                    <ul class="soc">
                        <li><a href="#" id="Facebook" 
 title="Facebook"></a></li>
                        <li><a href="#" id="Linkedin" 
 title="Linkedin"></a></li>
                        <li><a href="#" id="Youtube"  
 title="Youtube"></a></li>
                    </ul>
                    <span class="arrow" title="Collapse">     
 </span>
                </div>

                <ul class="nav">
                    <li><a href="#" id="Portfolio"></a></li>
                    <li><a href="#" id="Services"></a></li>
                    <li><a href="#" id="About"></a></li>
                    <li><a href="#" id="Home"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>





<script type="text/javascript" src="jscript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/nav.js"></script>

 </body>

 </html>
（“.socbar”）.hide（）在（”）之前； $（“.social_按钮”）。单击（函数（）{ var$link=$（此）； $link.next（）.show（“慢”）； $link.remove（）； 返回false； }); $（“.arrow”）。单击（函数（）{ $（“.socbar”）.hide（）； 返回false； }); 我的Html:

$(".socbar").hide().before("<div class='social_button'></div>");
$(".social_button").click(function(){
var $link = $(this);
$link.next().show("slow");
$link.remove();
return false;
});
$(".arrow").click(function(){
$(".socbar").hide().before("<div class='social_button'></div>");
return false;
});

<!DOCTYPE HTML>
 <html>

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Test Page</title>

 <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
 </head>



 <body>

<div class="container clearfix">

    <div class="navbar_container grid_5">
        <div id="navbar">
            <div class="nav_container grid_2 omega">
                <div class="socbar">
                    <ul class="soc">
                        <li><a href="#" id="Facebook" 
 title="Facebook"></a></li>
                        <li><a href="#" id="Linkedin" 
 title="Linkedin"></a></li>
                        <li><a href="#" id="Youtube"  
 title="Youtube"></a></li>
                    </ul>
                    <span class="arrow" title="Collapse">     
 </span>
                </div>

                <ul class="nav">
                    <li><a href="#" id="Portfolio"></a></li>
                    <li><a href="#" id="Services"></a></li>
                    <li><a href="#" id="About"></a></li>
                    <li><a href="#" id="Home"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>





<script type="text/javascript" src="jscript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/nav.js"></script>

 </body>

 </html>


测试页

    

  • 

  • 

  • 



    

  • 

  • 

  • 

  •
演示：

$(".socbar").hide().before("<div class='social_button'></div>");
$(".social_button").click(function(){
var $link = $(this);
$link.next().show("slow");
$link.remove();
return false;
});
$(".arrow").click(function(){
$(".socbar").hide().before("<div class='social_button'></div>");
return false;
});

<!DOCTYPE HTML>
 <html>

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Test Page</title>

 <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
 </head>



 <body>

<div class="container clearfix">

    <div class="navbar_container grid_5">
        <div id="navbar">
            <div class="nav_container grid_2 omega">
                <div class="socbar">
                    <ul class="soc">
                        <li><a href="#" id="Facebook" 
 title="Facebook"></a></li>
                        <li><a href="#" id="Linkedin" 
 title="Linkedin"></a></li>
                        <li><a href="#" id="Youtube"  
 title="Youtube"></a></li>
                    </ul>
                    <span class="arrow" title="Collapse">     
 </span>
                </div>

                <ul class="nav">
                    <li><a href="#" id="Portfolio"></a></li>
                    <li><a href="#" id="Services"></a></li>
                    <li><a href="#" id="About"></a></li>
                    <li><a href="#" id="Home"></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>





<script type="text/javascript" src="jscript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/nav.js"></script>

 </body>

 </html>

由于您已选择添加和删除.social_按钮元素，因此需要使用事件委派来处理单击事件

更改：

$(".social_button").click(function(){
致：

工作完美！我可以请求你帮我完成这个奇怪的转变吗？收拢和展开时，条会缩放其大小。我如何扩展它的全尺寸？