如何在单击另一个按钮后隐藏和显示一个按钮
how to hide and show one button after clicked on another button?
我将在一页中使用两个按钮。类似于当我们点击第一个按钮时,第二个按钮会出现在第一个按钮上,如果我们点击第二个,第一个按钮就会出现。而不会失去按钮的功能。
这是我的按钮代码:
<button id="button1" onclick="menu2.toggle()" class="sideviewtoggle myButton">Test 1</button>
<button id="button2" onclick="menu3.toggle()" class="sideviewtoggle myButton">Test 2</button>
例如:
测试1是默认设置,检测2被隐藏,如果我们单击检验1验1查2验2则它将消失,而取而代之的是检验1。而不会失去这两个按钮的onclick功能。
这是我的切换菜单功能,如果我们点击测试1按钮,那么这个页面:togglemenu.php将打开,如果我们单击测试2,那么togglemenu2.php也将打开。
jQuery(function(){
menu2 = new sidetogglemenu({
id: 'togglemenu2',
position: 'right',
source: 'togglemenu.php',
revealamt: -5
})
jQuery(function(){
menu3 = new sidetogglemenu({
id: 'togglemenu3',
position: 'right',
source: 'togglemenu2.php',
revealamt: -5
})
如何制作?
提前谢谢。
在不失去按钮功能的情况下,我认为您的意思是希望保持菜单切换。你需要做的是定义你自己的功能,在这个功能中,切换你的菜单并执行你想要的显示/隐藏。
在假设您是javascript新手的情况下,我编写了这个简单明了的示例。
//With a function, I am able to perform multiple tasks
function SwitchButtons(buttonId) {
var hideBtn, showBtn, menuToggle;
if (buttonId == 'button1') {
menuToggle = 'menu2';
showBtn = 'button2';
hideBtn = 'button1';
} else {
menuToggle = 'menu3';
showBtn = 'button1';
hideBtn = 'button2';
}
//I don't have your menus, so this is commented out. just uncomment for your usage
// document.getElementById(menuToggle).toggle(); //step 1: toggle menu
document.getElementById(hideBtn).style.display = 'none'; //step 2 :additional feature hide button
document.getElementById(showBtn).style.display = ''; //step 3:additional feature show button
}
<button id="button1" onclick="SwitchButtons('button1');" class="sideviewtoggle myButton">Test 1</button>
<button id="button2" onclick="SwitchButtons('button2');" class="sideviewtoggle myButton" style='display:none;'>Test 2</button>
您可能会考虑的另一种可能性是,您可以使用JavaScript动态更改按钮的外观和功能,而不是隐藏/取消隐藏按钮。
function toggle(ev) {
ev.target.dataset.state = ev.target.dataset.state === 'menu1' ? 'menu2' : 'menu1';
ev.target.textContent = ev.target.textContent === 'Test 1' ? 'Test 2' : 'Test 1';
if (ev.target.dataset.state === 'menu1') {
// Add code to display Menu 1 here.
} else if (ev.target.dataset.state === 'menu2') {
// Add code to display Menu 2 here.
}
}
document.querySelector('button').addEventListener('click', toggle);
<button type=button name=toggleButton data-state=menu1>Test 1</button>
隐藏或显示不同菜单的方式也可以采用类似的方法。所以你可以有一个toggleButton
函数,在这个函数里面,调用一个toggleMenu
函数。
我认为如果你使用Jquery
,最好创建一个隐藏的css类
.hidden {
display: none;
}
并使用方法.addClass() or .removeClass()
移除或添加
示例:
html文件:
<button id="hideMenu" class="sideviewtoggle myButton">Test 1</button>
js文件
$('#hideMenu').on('click', function() {
$('#menu-to-hide').addClass('hidden');
//or
$('#menu-to-show').removeClass('hidden');
});
相关文章:
- Jquery/Javascript:通过按下按钮显示数组中的随机图像
- 类似FB的按钮显示在页面上,但不会在同一页面上弹出
- 单击javascript按钮显示/隐藏Div元素
- 单击按钮显示不同的文本,重复第一个文本
- C3.js通过单击按钮显示工具提示
- 单击按钮显示重新单击消失
- 点击浏览器的“后退”按钮显示的是JSON而不是HTML(使用Rails和d3.js)
- 尝试从单选按钮显示的JSON数组中调用多个对象
- 在youtube视频中单击按钮显示图像
- 使用HTML和Javascript,使用4个单选按钮显示和隐藏输入字段
- 如何在javascript中使两个按钮显示在一起
- 如何使用按钮显示/隐藏潜水
- 使用不起作用的按钮显示和隐藏
- facebook点赞按钮显示数以万计的点赞
- 流星:点击按钮显示一些东西
- jQuery按钮显示/隐藏类,如果存在类
- 如何让我的 ckEditor 菜单按钮显示在两行而不是四行上
- 如何让我的移动菜单按钮显示和隐藏导航栏,以及在负空间中单击时隐藏
- 网格中的拆分按钮显示在行后面 - 剑道 UI
- Dijit 按钮显示图标,但不以编程方式显示标签