点击添加附加菜单项

Question

我有4个链接。其中3个应该是可见的，但是每当其中一个被点击时，第4个应该出现。如果前3个中的任何一个被按下，任何东西都不应该改变，但如果第4个（第一次点击时出现的那个）被点击，它应该消失，并且应该只有3个。关于如何做的任何想法？可能它会使用JQuery完成？！

Answer 1

JSFiddle Demo Here

一组链接：

<div> 
    <a href='#' id='link1' onclick='toggle(this)'>link 1</a> 
    <a href='#' id='link2' onclick='toggle(this)'>link 2</a> 
    <a href='#' id='link3' onclick='toggle(this)'>link 3</a> 
    <a href='#' id='link4' style='display:none' onclick='toggle(this)'>link 4</a> 
</div> 

使用JavaScript：

var disp = false; 

function toggle(el) { 
    if (disp) { 
     if (el.id == 'link4') { 
      document.getElementById('link4').style.display='none'; 
      disp = false; 
     } 
    } else { 
     if ((el.id == 'link1') || (el.id == 'link2') || (el.id == 'link3')) { 
      document.getElementById('link4').style.display='block'; 
      disp = true; 
     } 
    } 
} 

当你点击任何第3个环节的，第4会出现，当你点击它4（4链接）就会消失。

编辑：根据要求，here是与衰落相同的演示。至于代码的HTML是相同的，jQuery代码是：

var disp = false; 

function toggle(el) { 
    if (disp) { 
     if (el.id == 'link4') { 
      $('#link4').fadeOut(); 
      disp = false; 
     } 
    } else { 
     if ((el.id == 'link1') || (el.id == 'link2') || (el.id == 'link3')) { 
      $('#link4').fadeIn(); 
      disp = true; 
     } 
    } 
} 

Answer 2

给第三和第四链路的ID和设置样式visibility: hidden;

然后使用JQuery：

var 3rdLink = $("#3rdLinkId"), 
    4thLink = $("#4thLinkId"); //just good practice  
3rdLink.on('click', function(event){ 
    event.preventDefault(); //just in case it's a hyperlink 
    4thLink.css('visibility', 'visible'); 
)}; 

你有很多选择使用JQuery显示元素，这一切都非常的方便。

但是真的，这是全部的地方。一个简单的谷歌搜索就足够了

Answer 3

如果你的链接看起来是这样的：

<a href="#" class="show" onclick="show4()" >link 1</a> 
<a href="#" class="show" onclick="show4()" >link 2</a> 
<a href="#" class="show" onclick="show4()" >link 3</a> 
<a href="#" id="link4" class="hide" onclick="hide4()" >link 4</a> 

您可以使用此：

<style> 
.hide {display: none;} 
.show {display: block;} 
</style> 
<script> 
function show4() 
{ 
    document.getElementById('link4').style.display = "block"; 
} 
function hide4() 
{ 
     document.getElementById('link4').style.display = "none"; 
} 
</script> 

Answer 4

比方说，你的HTML看起来像这样

<div id="link-container"> 
    <a href="#">link1</a> 
    <a href="#">link2</a> 
    <a href="#">link3</a> 
    <a href="#">link4</a> 
</div> 

的CSS

#link-container a:last-child{display:none} 

的Javascript使用jQuery框架

$(function(){ 
    $('#link-container').on('click', 'a',function(e){ 
     var $t = $(this), 
      $last = $t.siblings('a').addBack().last(); 
     if($last[0] != this){ 
      $last.toggle(); 
     } 
    }); 
}); 

小提琴here