标签: toggle

按 ID 显示/隐藏/切换多个 Div?

stackoverflow 的好人帮了我一部分,现在我只需要一点点推过终点线。

我需要一个切换按钮,它在单击时打开 div(向下滑动),然后在单击时关闭,pref 也是一个活动类。

但是,如果您单击另一个切换按钮,子 div 打开并关闭前一个,如果它是打开的。

所以基本上没有一个打开的 div 可以同时打开,一次只能打开一个。

我需要通过锚 id 完成此操作,因为打开的 div 与切换按钮无关(它在页面下方)

到目前为止,这不起作用,但所有的 html 都在那里。http://jsfiddle.net/CkTRa/398/

非常感谢,如果有人可以提供帮助,搜索高低,我找到的最近的是这个http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/但它没有关闭一个已经单击新的 div 时打开 div。

jquery toggle slidetoggle

2
推荐指数
1
解决办法
2万
查看次数

jquery翻转开关使用jquery-toggles无法正常工作

我创建了一个使用Simon Tabor的"jquery-toggles"插件(https://github.com/simontabor/jquery-toggles)的简单示例.虽然它有效,但图形永远不会出现.我确认CSS和JS加载正常,但仍然没有图像.有人可以找出原因吗?

<html>
  <head>
    <link rel="stylesheet" href="/include/jquery-toggles-master/themes/toggles-light.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="/include/jquery-toggles-master/toggles.min.js"></script>
    <script>
      $(document).ready(function () {
        $('.toggle').toggles();
        });
    </script>
  </head>
  <body>
    <div class="toggle toggle-select" data-type="select"></div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

css jquery toggle

2
推荐指数
1
解决办法
2471
查看次数

jQuery切换隐藏在其他地方点击

这可能是一个非常简单但从未使用过这种类型的东西所以不知道该怎么做.

我正在使用fadeToggle来显示隐藏div

$('#account-toggle').click(     
function(){
    $('#account-toggle').toggleClass('account-active');
    $('.account-group').fadeToggle('fast');
});
Run Code Online (Sandbox Code Playgroud)

它工作得很好..(显然没什么复​​杂的:P)现在我想要的是当用户点击屏幕上的其他地方时隐藏它.

任何人都可以帮助我实现这一目标吗?...非常感谢

jquery toggle

2
推荐指数
1
解决办法
1316
查看次数

单选按钮和图像

我尝试为我的 RadioButton 设置图像而不是项目符号。我有 10 个单选按钮,但我无法设置所有的 FishImg。只有我之前单击的 rb 显示 imgFish。

我的风格

    <Style TargetType="RadioButton">
    <Setter Property="Content" Value="{DynamicResource imgFish}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <Grid>
                    <Image Source="Images/empty.png" Width="24" Height="24" />
                    <ContentPresenter/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Content" Value="{DynamicResource imgHero}"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Content" Value="{DynamicResource imgFish}"/>
        </Trigger>
    </Style.Triggers>
</Style>
Run Code Online (Sandbox Code Playgroud)

我的 XAML

                <RadioButton Grid.Column="2" Grid.Row="1" Name="hvP1" />
                <RadioButton Grid.Column="2" Grid.Row="2" Name="hvP2" />
                <RadioButton Grid.Column="2" Grid.Row="3" Name="hvP3" />
                <RadioButton Grid.Column="2" Grid.Row="4" Name="hvP4" />
                <RadioButton Grid.Column="2" Grid.Row="5" Name="hvP5" />
                <RadioButton …
Run Code Online (Sandbox Code Playgroud)

c# xaml toggle radio-button

2
推荐指数
1
解决办法
7341
查看次数

使用 jQuery 切换 CSS

$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

$('.information').click(function(e){
    $('.work-overlay').fadeOut();
    $('.information-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});
Run Code Online (Sandbox Code Playgroud)

我有以下代码可以在.information单击时切换叠加层,并在overflow:hiddentoggleClass.

但是,如果我单击.work和 THEN .information,它会破坏toggleClass.

javascript css jquery overflow toggle

2
推荐指数
1
解决办法
5933
查看次数

jQuery用一个按钮切换多个复选框

我正在尝试使用jQuery编写一个简单的方法来检查和取消选中表单复选框.我已经尝试了stackoverflow中的一些示例,但是我有限的JS知识让我无法获得结果.

这是我的代码,并没有按照我的意图将输入复选框更改为"已选中",我还包含一个清除选择的按钮,但JS仍然没有引用它.

HTML:

<section id="opzioni">

<div class="bottoni-toggle">
    <!-- toggle button -->
    <input id="#select-all" type="button" value="Tutti" title="Toggle">
    <!-- clear button -->
    <input id="#select-none" type="button" value="Nessuno" title="Clear">
</div>

                <div class="col_opt">
                    <span class="custom_chb_wrapper">
                        <span class="custom_chb">
                            <input class="bottone-opzioni" id="_4wd" name="_4wd" type="checkbox">
                            <input id="_4wd" name="_4wd" type="hidden" value="0">
                        </span>
                        <label>4WD</label>
                    </span>
                </div>

                <div class="col_opt">
                    <span class="custom_chb_wrapper">
                        <span class="custom_chb">
                            <input class="bottone-opzioni" id="_airbag" name="_airbag" type="checkbox">
                            <input id="_airbag" name="_airbag" type="hidden" value="0">
                        </span>
                        <label>Airbag</label>
                    </span>
                </div>
Run Code Online (Sandbox Code Playgroud)

jQuery的:

$(document).ready(function() {
    $("#select-all").click(function() {
        var checkBoxes = $("input.bottone-opzioni");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });
});
Run Code Online (Sandbox Code Playgroud)

这是我设置测试的 …

checkbox jquery toggle

2
推荐指数
1
解决办法
1273
查看次数

使用 Jquery 动画切换可见性

我正在使用以下代码切换我的 Div,但无法弄清楚是否以及如何对其进行动画处理。任何帮助,将不胜感激。

链接:

<a href="#" onclick="toggle_visibility('example'); return false;"></a>
Run Code Online (Sandbox Code Playgroud)

剧本:

<script>

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>
Run Code Online (Sandbox Code Playgroud)

javascript jquery toggle

2
推荐指数
1
解决办法
1676
查看次数

巨型下拉菜单悬停闪烁

我在网上找到的大型下拉菜单有问题。它非常适合我的目的,但有时它的行为很奇怪,并且有闪烁和闪烁的问题。我找到它的链接在这里:http : //bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel。作者已经知道这个问题,但基本上它可以在移动设备上正常工作,如果它会被隐藏。在桌面版本上,我认为这是一个非常好的主意,我在我建立的网站上使用:http : //napoleon.larchedigitalmedia.com/

我之前告诉过你的问题是调情,我猜问题出在 jquery 中:

$(".dropdown").hover(            
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
      $(this).toggleClass('open');        
    },
    function() {
      $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
      $(this).toggleClass('open');       
    });
Run Code Online (Sandbox Code Playgroud)

我不明白这是引导程序问题(引导程序主要使用大型下拉菜单的 onclick 事件)还是问题出在此代码段中。本质上,类 open 添加(切换)到一个 div 的速度太快了,有时它会同时应用于两个 div。谁能帮我解决这个问题?

jquery toggle megamenu twitter-bootstrap

2
推荐指数
1
解决办法
1411
查看次数

如何更改打开的引导程序下拉列表的背景颜色 - Bootstrap 4

如何更改打开的引导程序下拉选项的背景颜色。这是代码:

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar6">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a href="#" class="navbar-brand">Title </a>
  <div class="navbar-collapse collapse justify-content-stretch" id="navbar6">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">About<span class="sr-only">Home</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Services
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Design</a>
          <a class="dropdown-item" href="#">Development</a>
          <a class="dropdown-item" href="#">Consulting</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>
Run Code Online (Sandbox Code Playgroud)

在引导程序 3 中,我在以下帮助下对其进行了更改:

.navbar-default .navbar-nav > .open > a,
.navbar-default …
Run Code Online (Sandbox Code Playgroud)

css toggle navbar twitter-bootstrap dropdown

2
推荐指数
1
解决办法
9775
查看次数

单击时上下更改 V 形

 $("button").click(function () {
        $("ul").toggle();
    });
Run Code Online (Sandbox Code Playgroud)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button> <img src="/images/default_avatar.jpg">Hello!<i class="fa fa-chevron-up"></i> </button>
                    <ul style="display:none;">
                        <li><a href="#">Account settings</a></li>
                        <li><a href="#">Logout</a></li>
                    </ul>
Run Code Online (Sandbox Code Playgroud)

我有一个按钮,它有一个 V 形向上和一个列表,我想要做的是显示列表并在切换时隐藏它,我做到了,我希望 V 形向上也可以在切换时更改为向上和向下,我怎样才能做到这一点?这是我的代码:

jquery onclick toggle twitter-bootstrap

2
推荐指数
1
解决办法
5727
查看次数