标签: toggle

我有一个jQuery函数,当点击它的图例时,它会切换字段集内容的可见性,只留下字段集边框(如果有的话)和图例显示:

$('legend.togvis').click(function() {
    $(this).siblings().toggle();
    return false;
});

除非fieldset包含文本节点,否则它很有效.

<fieldset><legend class='togvis'>Click Me</legend>
  <p>I toggle when the legend is clicked.</p>
  But I'm a recalcitrant text node and refuse to toggle.
</fieldset>

为了切换文本节点,我尝试了这个:

$('legend.togvis').click(function() {
    $(this).parent().contents().not('legend').toggle();
    return false;
});

其作用与第一个函数相同.还有这个:

$('legend.togvis').click(function() {
    $(this).parent().contents(":not(legend)").toggle();
    return false;
});

这引发了错误

Message: 'style.display' is null or not an object
Line: 5557
Char: 3
Code: 0
URI: http://code.jquery.com/jquery-1.4.4.js

有关如何获取字段集的整个内容(减去图例)以在单击图例时切换的任何想法？

ETA解决方案,非常感谢Eibx

$('legend.togvis').click(function() { 
    $(this).parent().contents().filter(
        function() {  return this.nodeType == 3; }).wrap('<span></span>');//wrap any stray text nodes
    $(this).siblings().toggle(); 
}); 

我有一个链接,当点击这个我想要一个div来滑动,然后再次点击链接,它应该关闭div,缓和...

我看过jQuery easing插件,但它不适用于jQuery 1.5.1？对我能做什么以及如何做的任何想法？

现在我只有一个slideToggle函数,它没有缓动？

$('.open-mypage').click(function () {
    $('#mypage-info').slideToggle('2000', function () {
        // Animation complete.
    });
});

我打算展示一个树形结构,点击树形结构,我想要一个网格显示.由于我必须展示原型,我正在考虑使用Jquery来展示以下内容

Application1(Onclick)

• 显示<DIV>数据(类似于网格)

申请2(Onclick)

• 折叠应用程序1 Div(不可见)
• 申请2 DIV(可见)

等......

有没有可用的例子可以用来模拟这个？

我有一个滑出导航栏,我想在屏幕宽度> = 1024时默认打开,默认情况下关闭<1024.我有一个按钮,可以打开并关闭它.我刚刚开始学习js.我想如果窗口宽度> = 1024,有一种方法可以在if语句中设置默认切换状态.任何帮助将不胜感激.这是我到目前为止切换的内容.

$('a.expand').toggle(function() {
        $(this).addClass("open");
        $('#nav').animate({width: 50},{queue:false, duration:300});
        $('.wrapify').animate({marginLeft: 50},{queue:false, duration:300});
        $('.primarynav ul').hide();
        $('.navlogo').hide();   

  }, function() {
        $(this).removeClass("open");
        $('#nav').animate({width: 200},{queue:false, duration:300});
        $('.wrapify').animate({marginLeft: 200},{queue:false, duration:300});
        $('.primarynav ul').show();
        $('.navlogo').show(); 

  });

目前我有一个看起来像这样的离子切换

我想做这个

反正有没有让这件事发生？我在某处读到了我可以使用ng-true-value和ng-false-value,但这似乎没有做我想要的

我正在使用选项卡显示清晰的内容,但其中一个已停止下载,因为它位于数据切换选项卡中.这是一张传单地图.这是代码:

导航条代码:

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
    <li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">Lorem ipsum</div>
    <div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>

脚本:

<div id="carteBenef"></div>
      <script type="text/javascript">
          $(document).ready(function () {
              var map = new L.Map('carteBenef');
              var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
                     subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
                     cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>';
              var cloudmade = new L.TileLayer(cloudmadeUrl, …

我想知道是否可以在一个函数中使用toggle()和fadeIn()...

我让这个工作,但它只在第二次点击后消失...而不是第一次点击切换.

$(document).ready(function() {

 $('#business-blue').hide();

  $('a#biz-blue').click(function() {
    $('#business-blue').toggle().fadeIn('slow');
    return false;
  });

// hides the slickbox on clicking the noted link 

  $('a#biz-blue-hide').click(function() { 
     $('#business-blue').hide('fast'); 
     return false; 
  }); 


});



  <a href="#" id="biz-blue">Learn More</a>
        <div id="business-blue" style="border:1px soild #00ff00; background:#c6c1b8; height:600px; width:600px; margin:0 auto; position:relative;">
            <p>stuff here</p>
        </div>

我在页面的左侧有一个"菜单"按钮,一旦选中,我有一个包含菜单项显示的div.然后我有另一个按钮可以选择隐藏菜单.

理想情况下,我希望它能够(从左到右)向后滑动,但却没有成功地使其正常工作.我已经尝试过使用animate和SlideToggle,但是没有一个能够正常使用.有小费吗？

<div id="cat_icon">Menu</div>
<div id="categories">
    <div CLASS="panel_title">Menu</div>
    <div CLASS="panel_item">
        <template:UserControl id="ucCategories" src="UserControls/ProductCategories.ascx" />
    </div>
</div>

$('#cat_icon').click(function () {
    $('#categories').toggle();
    $('#cat_icon').hide();
});
$('.panel_title').click(function () {
    $('#categories').toggle();
    $('#cat_icon').show();
});

当你将鼠标悬停在它上面时,我试图让.icon-bar类改变颜色.我得到了切换按钮来改变颜色和图标栏使用:

.navbar-preheader .navbar-toggle {
    border: 1px solid white;
    background-color: transparent;
    margin-right: 0;
}

.navbar-preheader .navbar-toggle:hover {
    background-color: #4d4d4d;
}

.navbar-preheader .navbar-toggle .icon-bar {
    background-color: white;
}

我使用的悬停代码是:

.navbar-preheader .navbar-toggle .icon-bar:hover {
    background-color: #4d4d4d;
}

但这基本上是让每个图标栏单独改变颜色(见下文),但它们应该一次改变颜色......

我确信这是我想念的傻事,但是非常感谢任何帮助.谢谢.

我在angular 4项目中使用ng-bootstrap:

<navbar class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <button aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarsDefault" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarsDefault">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link active" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerlink="/program" routerlinkactive="active" ng-reflect-router-link="/program" ng-reflect-router-link-active="active" href="/program">Programm</a>
            </li>          
        </ul>
    </div>
</navbar>

导航栏在那里,它是响应,它似乎工作正常.但导航栏切换按钮不会切换导航栏,当它折叠并且我找不到错误时.