标签: toggle

在 id 为 1-3 的备用 div 之间，当用户单击相应的链接时，如何显示每个 div 之间的可见性？我只想一次显示一个 div。谢谢。

<a>Link 1</a><br>
<a>Link 2</a><br>
<a>Link 3</a><br>

<div id="1">
    <p align="left">Content 1</p>
    </p>
</div>
<div id="2">
    <p align="left">Content 2</p>
    </p>
</div>
<div id="3">
    <p align="left">Content 3</p>
    </p>
</div>

我有这个简单的功能，可以切换网页中的隐藏元素。

function showtable(id) 
 {
 if(document.getElementById(id).style.display == 'block')
  {
document.getElementById(id).style.display = 'none';
  }else{
document.getElementById(id).style.display = 'block';
}
 } 


<input type="button" value="Toggle" onclick="showtable('id');" />

这工作正常，但我想在每次单击按钮时关闭页面上的一些其他（表格）元素（具有某些 ID）（除了正在切换的元素，无论是打开还是关闭）。

我正在使用PrimeFaces 3.4可折叠面板。实际解决方案的问题在于，通过单击右侧的小按钮可以切换面板。它不是很符合人体工程学，用户希望通过单击标题上的任意位置进行切换。

这就是我要实现的：通过单击标题触发切换并删除切换按钮。这是我写的：

$('.ui-panel-titlebar').each(function(){
    var header = $(this);
    var widgetId = 'widget_' + header.attr('id').replace(/:/g, '_').replace(/_header$/, '');
    header.css('cursor', 'pointer');
    var toggler = header.find('a[id$=_toggler]');
    toggler.remove();
    header.click(function(){
        window[widgetId].toggle();
    });
});

但是我不喜欢这种解决方案，因为首先我猜到了JavaScript小部件ID，其次，我从DOM树中删除了已渲染的切换按钮，我希望根本不渲染它。

有没有一种方法可以在不编写太多代码的情况下以更优雅的方式实现相同的效果（因此，无需重写p:panel）？作为解决方案，可以使用基于与PrimeFaces（商业友好）相同的许可证的扩展。

我正在尝试在我的网站上启动并运行 jQuery。

到目前为止，我的代码是：

<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".flippanel").toggle();
  });
});
</script>

然后我在 HTML 中有：

<p class="flip">Flip it!</p>
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
<p class="flip 2">Flip it!</p>
<p class="flippanel 2 ">This is a paragraph with little content.</p>
<p class="flippanel 2">This is another small paragraph.</p>

我该如何让它独立切换两个面板？现在，每个面板同时切换。

编辑:这已在下面得到解答.

我想有一个HTML表,每行之间有隐藏的行,有关顶级行的更多信息.单击第一列中的展开/折叠图像链接时,隐藏行的可见性将从display:none切换; 显示:table-row;.我有一段时间没有编写JavaScript,需要能够在JavaScript中严格执行此操作,并且不能使用jQuery toggle()方法.

我如何使用JavaScript来查找带有class ="parentRow"的class ="subRow"的兄弟,该按钮位于表中,然后切换该兄弟行的可见性？

HTML

<table style="width:50%">
    <caption>Test Table</caption>
    <thead>
        <tr align="center">
            <th><span class="offscreen">State Icon</span></th>
            <th>Column 2</th>               
            <th>Column 3</th>               
            <th>Column 4</th>               
            <th>Column 5</th>
        </tr>
    </thead>
    <tbody>
        <tr align="center" class="parentRow">
            <td><a href="#" onclick="toggleRow();"><img alt="Expand row" height="20px;" src="expand.png"></a></td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
            <td>test cell</td>
        </tr>
        <tr style="display: none;" class="subRow">
            <td colspan="5"><p>Lorem ipsum dolor sit amet...</p></td>
        </tr>
....
    </tbody>
</table>

CSS

.offscreen {
  position: absolute;
  left: -1000px;
  top: 0px;
  overflow:hidden;
  width:0;
}

.subRow {
    background-color: #CFCFCF; 
} …

我有一个Android应用程序,在一个活动中我需要一个像选择器的选项卡,用户可以选择一个选项.3个选项是蓝色,绿色,红色.用户需要选择其中任何一个.我可以使用微调器.但是我喜欢使用圆形边框标签,可以切换,所选项目将突出显示,其他项目将显示为灰色,如下所示. 我只是希望用户能够只切换其中一个按钮.用户可以通过点击或切换来选择一个选项,视图应该看起来像一个带有圆边的条.如何在android中实现上面的视图？请帮我.

我想单击 span 元素一次，以便出现工具提示，然后再次隐藏。

这是我的 html。我究竟做错了什么？

<span mdTooltip="Tooltip!" (click)="tooltip.toggle()>Test</span>

我有一个简单的点击功能,当点击一个按钮时,用户无法滚动.一切正常.该按钮用作切换,并且在切换的"其他"部分,即当用户再次单击时,我想删除阻止用户使用该removeEventListener();方法滚动的事件监听器.我在这个方法中调用的函数虽然不起作用？

我似乎无法弄清楚问题是什么？

codepen:https://codepen.io/emilychews/pen/MrBvzP

JS

var button = document.getElementById("button");

// function to be called and removed when button is clicked
function noscroll() {
    window.scrollTo(0, 0);
}

// TOGGLE EVENT LISTENER
var scrollToggle = false;

function toggleEventListener() {
    if (scrollToggle === false) {

        window.addEventListener("scroll", function(){
        noscroll();        
        }, false);

      scrollToggle = true;

    } else {

        window.removeEventListener("scroll", function(){
        noscroll();        
        }, false);

      scrollToggle = false;

    }
}

button.addEventListener("click", function() {
    toggleEventListener();
}, false)

body {margin: 0; padding: 0; height: 150vh;}

#button …

我的大脑已经检查了周末......

我正在寻找一种纯 Javascript 解决方案，如果在单击另一个主菜单项时打开一个下拉菜单框，则先前打开的下拉列表将关闭，然后显示新单击的主菜单项的下拉列表。我知道这可能很简单，但我想不出一个不复杂的解决方案。

此外，如果您单击菜单项外部（文档中非菜单项或下拉框的任何位置）应关闭所有打开的下拉列表。

感谢您的任何帮助。

function testFunc(el) {
  var parent = el.parentElement;
  var dd = parent.lastChild.previousSibling;
  dd.classList.toggle('show');
}

ul { list-style: none; margin: 0; padding: 0; }
ul li {
  width: 100px;
  float: left;
  background: #dbdbdb;
  line-height: 2em;
  text-align: center;
  margin: 0 5px;
  cursor: pointer;
}
ul li span {
  display: block;
}
ul li ul {
  display: none;
}

.show {
  display: block;
}

<ul>
  <li>
    <span onclick="testFunc(this)">Item 1</span>
    <ul>
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
    </ul>
  </li> …

昨天试图让这段代码使用 JavaScript 工作几个小时，因为我真的很想尽可能地了解基础知识，但最终放弃并用 JQuery 编写它。想要一些关于如何用 vanilla JS 编写的建议。我只是想用一个按钮来显示一个隐藏的“div”，所以我觉得它应该很简单，我只是忽略了一些东西：

查询：

$('document').ready(function() {
    $('.aboutBtn').click(function() {
        $('#more-brian').toggleClass('hide');
    });
})

HTML：

<div class="row">

            <div class="card col-sm-6">
            <h5 class="card-title">Brian Davis</h5>
              <img class="card-img-top" src="../soccer-travel-site/img/brian-davis.jpg" alt="Brian Davis photo">
              <div class="card-body">
                <p class="card-text">Brian is the founder of AO Adventures and an original host of the BarrelProof Podcast.<button type="button" class="btn btn-danger aboutBtn">More About Brian</button></p>
              </div>
            <div id="more-brian" class="hide">
                <p id="brian-para">Brian is a husband and father who is very passionate about soccer. He has been to over 50 U.S. Men's …