Question

我一直在寻找一个按钮，在点击时会在其下方/旁边显示突出显示的网址，并在再次按下时再次隐藏它。我记得之前看过一个，但我不知道它在哪里，并且无法找到它的任何例子。

我确实找到了Button that displays and hides a sliding menu，但它并不是我想要的，而且我没有足够的经验来应用这些代码来制作类似的东西，但是在按钮下面有一个正确格式的文本框

Answer 1

请查看以下您要查找的代码。

$(document).ready(function () {
var btnA = $("#btnSubmit");
  btnA.click(function () {
     $("#url").toggle();
  });
});

JSFiddle相同如下。

JSFiddle

如果这没有用，请告诉我。

Answer 2

jQuery's Toggle可能正是您所寻找的。

除了突出显示之外，获取所需内容的基本示例可以是

<button onclick="$('#URL').toggle();">Click Me</button>
<br />
<span id="URL">www.google.com</span>

Answer 3

或者根据具体情况，你可以用checkbox元素和一些css来做。

example

<label for="your-btn">
<input type="checkbox" value="" name="" id="your-btn"> 
<span>Button</span>
</label>

<style>
[type="checkbox"] {
border: 0; 
clip: rect(0 0 0 0); 
height: 1px; margin: -1px; 
overflow: hidden; 
padding: 0; 
position: absolute; 
width: 1px;
}

[type="checkbox"] + span {
color: white;
background: #333;
line-height: 1.5;
padding: 1em;
display: inline-block;
width: auto;
cursor: pointer;
}

[type="checkbox"] + span::after {
content:'yourcontent';
padding-left: 2em;
position: absolute;
background: none;
color: black;
display: none;
}


[type="checkbox"]:checked + span {
 background: green;
}

[type="checkbox"]:checked + span::after {
 display: inline-block;
}
</style>

显示/隐藏其下方突出显示的URL的按钮

3 个答案: