标签: toggle

我有一个页面，上面有一堆像这样编码的假下拉菜单（我无法真正更改 HTML）：

<div class="select">
    <div class="wrapper calcdropdown">
        <a href="#" class="dd-openercalc">Select a calculator</a>
        <a href="#" class="dd-opener pulldown-arrow">&nbsp;</a>
    </div>
    <ul class="selectbox">
        <li>Dropdown item 1</li>
        <li>Dropdown item 2</li>
        <li>Dropdown item 3</li>
    <ul>
</div>

当我单击 calcdropdown DIV 中的任一链接时，我需要切换相应的选择框 UL。当我使用 toggle() 时，选择框 UL 在我第一次单击链接时出现，但在我再次单击链接时不会消失。

var $j = jQuery.noConflict();
$j(document).ready(function() {
    // hide all the dropdowns by default
    $j(".selectbox").hide();

    $j('.calcdropdown a').live('click',function(e) {
        // hide the dropdowns in case another one's open
        $j(".selectbox").hide();
        var self = $j(this);
        // show the selectbox for this link
        var thisSelectbox = …

我尝试搜索该网站，发现了一堆必须处理该网站上切换 div 的响应。我还阅读了 jquery 网站上的文档。然而，我所有的编程经验主要是后端 java 服务，而且我根本不是前端 Web 开发人员，所以当我看到所有对答案的解释时，我真的不明白它们。我已经在一个单独的 div 上工作了，但我希望在一个页面上工作，该页面将有数百个 div，我希望能够单独切换。

有人可以帮助我不仅得到答案，而且真正了解发生了什么吗？

我有一个包含两种语言的故事的页面。默认情况下隐藏一种语言，显示另一种语言。我希望能够单击单个 div，然后让该特定 div 切换语言。我在示例中使用了 4 个 div，但我希望它能够在包含数百个 div 的页面上运行。

我尝试过一些不同的事情。

\n
• 我是否需要为我包装的外部 div 分配一个类或 id？为什么？
\n
• 如何让我的操作应用于页面上的每个 div，而无需为每个 div 编写 onclick() 属性并传入单独的 id？
\n

超文本标记语言

<div>\n    <div id="l12" class="l1">\n        CHAPTER I Down the Rabbit-Hole\n    </div>\n    <div id="l22" class="l2" toggeled="true">\n        Cap\xc3\xadtulo I Descendo a Toca do Coelho\n    </div>\n</div>\n<div>\n    <div id="l13" class="l1">\n        <p>\n            Alice was beginning to get very tired of …

我在C++中得到了这个警告.

当我尝试使用g ++构建程序时

g++ --version

g++ (GCC) 4.4.7 20120313 (Red Hat 4.4.7-4)
Copyright (C) 2010 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

file.cpp: In function âvoid mainloop(THREAD_DATA*)â:
file.cpp:970: warning: statement has no effect

typedef
struct THREAD_DATA_
{
    struct spectate_player_t {
            bool        want_updates;   /* want player updates by specating all players every 100 milliseconds (who are in ship of course) …

虽然我发现基本上相同的问题在这里和其他网站上被问过很多次，但我已经花了好几个小时试图让这些答案在我的网站上工作，但无济于事；我只是被难住了。可能是因为我对 Javascript 还很陌生，自学成才，我这样做是为了扩大我的技能，所以我可能会遗漏其他任何人都显而易见的东西。

无论如何，在我的网站上，我有一个侧边栏的 div，我使用 jQuery 来切换它并调整父 div 以补偿它通过按钮隐藏时的缺失。我希望能够使用 cookie 以便我可以在不返回默认状态的情况下进行刷新，但我以前从未使用过 cookie，并且我可以找到有关该主题的每个教程以及我可以找到的每个答案类似的问题导致代码由于我无法弄清楚的原因而无法正常工作。

这是我网站的简化版本的JSFiddle。（尽管由于某种原因切换脚本在那里不起作用 - 它在我的网站上起作用！我在简化它时可能错过了一些东西，但我终生无法弄清楚是什么。）

HTML：

<div class="bgcontainer_center">
    <div id="sidebar">
        <p>Sidebar Content</p>
    </div>
    <div id="wrapper">
        <div id="toggle">
            <input type="button" value="Toggle Sidebar">
        </div>
        <p>Main Content</p>
    </div>
</div>

CSS：

.bgcontainer_center {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    max-width: 500px;
    background-color: #ff00ff;
    height: 100%;
}
.bgcontainer_center.clicked {
    max-width: 350px;
}
#sidebar {
    float: left;
    width: 25%;
    max-width: 125px;
    background-color: #00ff00;
    height: 100%;
    left: 0px;
}
#wrapper {
    width: auto; …

我目前有一个使用 Bootstrap 构建的折叠按钮，我正在尝试将文本从“阅读更多”转换为“阅读更少”。我一直在尝试 jQuery，但我无法让它工作。

<a data-toggle='collapse' href='#collapseExample' id='#collapseExample' class='text-center btn btn-default'>Read More</a>
    <div class='collapse' id='collapseExample'>
        <p class='readmore'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>


$(document).ready(function(){
 $('#collapseExample').on('click', function () {
  var text=$('#collapseExample').val();
  if(text==='Read more'){
    $(this).text('Read less');
  } else{
    $(this).text('Read more');
 }
});
})     

我有一个按钮，我想在单击时将其背景颜色更改为白色，然后当我再次单击时它返回到原始背景颜色，我该怎么做？这是我的代码：

 $(document).ready(function () {
            $("button").click(function () {
    $(this).css("background-color", "#FFF");
                    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hello</button>

我需要在运行 Maven 构建时排除某些 Java 源文件作为最终构建的一部分进行编译。

我在基于 Spring Boot 的项目中使用 Spring Boot Maven 插件。

我正在寻找一种从编译中排除 Java 源文件的方法，并且在构建时也需要从最终构建中排除相应的 Junit 测试类。

有没有办法使用 Spring Boot Maven 插件实现相同的目标？

我有4个组件。我只想一次渲染一个。我的导航中有按钮，当我单击一个按钮时，它应该呈现该组件，然后隐藏其他 3 个（即将它们设置为 null）

这很容易使用 2 个组件。我只有一个像这样的切换功能：

toggle() {
  this.setState(prevState => ({
    showTable: !prevState.showTable
  }));
}

我已经尝试在我有这个的地方调整这个：

showComponent(component) {
  this.setState(prevState => ({
    [component]: !prevState.component
  }));
}

当我单击相应的按钮时，这当前显示了组件。但是，一旦再次单击相同的按钮，它就不会隐藏组件。

我的所有按钮都像这样调用这个方法：

<button onClick={() => this.showComponent('AddPlayer')}>Add</button>
<button onClick={() => this.showComponent('ShowPlayers')}>Players</button>
<button onClick={() => this.showComponent()}>Table</button>
<button onClick={() => this.showComponent()}>Matches</button>

有任何想法吗？

编辑：

{this.state.AddPlayer ?
              <div className="add-container">
                <AddPlayer />
              </div>
              :
              null
            }
            {this.state.ShowPlayers ?
              <div className="players-container">
                <Players />
              </div>
              :
              null
            }

I prepared simple navbar menu with BS 4 documents. The toggle menu displays vertical when I clicked. Is it possible make horizontal with BS?

This is my navbar and codepen.io: vertical toggle

body {
  margin: 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="nav-brand" href="#">
    <img class="img-responsive" src="https://cdn2.iconfinder.com/data/icons/camping-outline-flat-pt-2/100/069_-_snowboard_snowboarding_board_1-128.png" width="55" height="55" alt="logo">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
    <span class="navbar-toggler-icon"</span>
  </button>
  <div class="collapse navbar-collapse" id="mainNav">
    <div class="navbar-nav ml-auto">
        <a class="nav-item nav-link active" …

我有三个切换按钮，我想在刷新页面后保持切换状态。我读了很多东西，但不知道如何在我的情况下使用它们。

这是按钮和 div

    <button class="badge badge-danger mb-4 d-flex left" type="button" data-toggle="collapse" data-target="#personal-data" aria-expanded="false" aria-controls="personal-data"></button>
    <button class="badge badge-danger mb-4 mr-md-4 ml-md-4" type="button" data-toggle="collapse" data-target="#email-change" aria-expanded="false" aria-controls="email-change"></button>
    <button class="badge badge-danger mb-4" type="button" data-toggle="collapse" data-target="#user-history" aria-expanded="false" aria-controls="user-history"></button>
    <div class="collapse" id="personal-data">
                <div class="form-group col-12">

     <div class="col-12">
            <div class="collapse" id="email-change">

     <div class="col-12">
            <div class="collapse" id="user-history">