标签: toggle

我正在尝试重新创建BBC主页上显示的效果,其中链接"添加更多此页面"和"设置位置"幻灯片打开其相应的div并显示其相关内容.如果您选择"向此页面添加更多内容",则会滑动"添加更多"部分.如果您再次选择"向此页面添加更多内容",则会关闭"添加更多"部分.但是,如果"添加更多"部分已打开,并且您选择"设置位置",则会在向下滑动"设置位置"选项之前滑动"添加更多"部分.

我已设法使用以下代码重新创建此效果:

HTML

    <ul id="demo">
        <li><a href="#sectionOne">Link One <span class="rm">this site</span></a></li>
        <li><a href="#sectionTwo">Link Two</a></li>
        <li><a href="#sectionThree">Link Three</a></li>                 
    </ul>

    <div id="siteCustomisation">
        <div class="siteSelection" id="sectionOne">
            <h3>Section One</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue tincidunt tortor, id condimentum massa scelerisque id. Cras elit magna, posuere at sollicitudin in, tristique nec turpis.</p>
        </div>
        <div class="siteSelection" id="sectionTwo">
            <h3>Section Two</h3>
            <p>Maecenas condimentum tincidunt pretium. Ut est ipsum, pharetra quis congue eu, eleifend vitae velit. Vestibulum quam purus, posuere quis vehicula ut, sollicitudin …

我正在尝试将jQuery Cookie插件实现到我的幻灯片切换脚本中,但到目前为止还没有成功.这是我的代码(没有任何cookie实现):

jQuery的:

$(document).ready(function() {
  $('a.toggle').click(function() { 
   var id = $(this).attr('name');
   $('#module' + id).slideToggle('fast');
   $('a.toggle[name='+id+']').toggle();
   return false; 
  });
});

HTML:

<a class="toggle" name="1" href="#">- Hide</a> 
<a class="toggle hidden" name="1" href="#">+ Show</a>

<div id="module1"><p>Hello World</p></div>

任何人都知道在现有代码中实现jQuery Cookie插件是否容易,以便记住打开/关闭状态？

谢谢.

如何检查元素是否有标签并调用切换功能来显示它？

试试这个:

if($('label').attr('for') == $(this).attr('name')) {
    alert($('label').attr('for') == $(this).attr('name')); // displays true if hidden or displayed
    $('label').attr('for='+$(this).attr('name')).toggle(true); // error
}

HTML未隐藏(这只是为了在隐藏元素时显示正确的语法):

<div>
    <label for="state" class="ui-select">
        State*
    </label>
    <div class="ui-select">
        <a href="#" role="button" aria-haspopup="true" data-theme="z" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-z ui-btn-up-z">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text">State*</span>
            <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
        </span>
        </a>
        <select name="state" id="state" tabindex="-1" class="required">
            <option value="">State*</option>
            <option value="AK">ALASKA</option>
            <option value="...">...</option>
        </select>
    </div>
</div>

HTML隐藏:

<div>       
    <div class="ui-select">
        <a href="#" role="button" aria-haspopup="true" data-theme="z" class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-down-z ui-btn-up-z"> …

我已经在这里使用了一些信息来创建一个切换状态检查,它可以在常规的即时切换中正常工作,但是如何将它应用于具有慢动画的slideToggle？这是我的代码:

$('#elemToggle').click(function() {
    $("#elem").slideToggle('slow');
    if($("#elem").is(":visible")) {
        $('#elemToggle').addClass('down');
        $('#elemToggle').removeClass('up');
    } else {
        $('#elemToggle').addClass('up');
        $('#elemToggle').removeClass('down');
    }
    return false;
});

上面的方法不起作用,因为当你按下按钮时,技术上elem仍然是可见的,只是被折叠了.有任何解决方法的想法吗？!:)

谢谢

HTML:

<div id="bottomContent" class="bottom_content" > <p>First Content</p> </div>

<div id="bottomContent2" class="bottom_content" > <p>second Content</p> </div>

<div id="bottomContent3" class="bottom_content" > <p>Third Content</p> </div>

JS:

   $("div.one").click (function(){
      $("#bottomContent2").hide();
      $("#bottomContent3").hide();
      $("#bottomContent").animate({width: "toggle"}, 1000);
    });

    $("div.two").click (function(){
       $("#bottomContent").hide();
       $("#bottomContent1").hide();
       $("#bottomContent2").animate({width: "toggle"}, 1000);
    });

    $("div.three").click (function(){
       $("#bottomContent").hide();
       $("#bottomContent2").hide();
       $("#bottomContent3").animate({width: "toggle"}, 1000);
    });

我有以下jQuery代码,当单击每个div时,它将为其自己的相应div项设置动画并关闭可能已经打开的任何其他div但我相信有更好的方法来编码它并使其比我已经做好了.任何帮助将不胜感激.

这是我的悬停事件的小提琴.

目前在悬停所有同一类的div都被切换.我只想切换一个div(正在徘徊的那个).我尝试了一些过滤器,但似乎无法解决.

非常感谢帮助.

我正在寻找一种方法来改变切换时的背景图像,如下所示:

jQuery - 切换图像展开/关闭

我的问题是我有这个HTML:

<button id="close-menu"></button>
<div id="menu-bar">
<div class="wrapper">
    <a href="http://www.website.com" target="_blank">
        <img src="image.png" alt="">
    </a>
    <div class="options">
        <h2>eBlast Tools</h2>
        <ul>
            <li class="toggle-images">Images are <span>enabled</span>. Click to disable.</li>
            <li class="download-zip"><a href="download.zip">Download ZIP File</a></li>
        </ul>
    </div>
</div>
</div>

这是我目前的jquery:

$('#close-menu').click(function() {
    $('#menu-bar').slideToggle(400);
    return false;
});

这是css:

#close-menu {
background: url(../img/minus-button.png);
background-position: top left;
width: 25px;
height: 25px;
position: absolute;
top: 10px;
right: 20px;
z-index: 100;
border: none;
}

#close-menu:hover {
background: url(../img/minus-button.png);
background-position: bottom left;
}

我希望能够按下一个显示“隐藏”的按钮，然后在用户单击该按钮时说“显示”。在下面的代码中，切换部分有效，但现在我需要“隐藏”文本一旦内容被隐藏就变成“显示”。

我从以下位置获取切换代码：http : //thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U

 <script type="text/javascript">
    function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
    }
    </script>

    <div class="ISBody">
     <h5>Header</h5>
     <div class="ISTopLink"><a href="#ISTop">Return to Top</div>
     <div class="ISHide"><a href="javascript:toggle('pos')">Hide Products - </a></div>
     <hr>
     <div id="pos" style="display: block;">
      <div class="ISProductBody">
       <div class="ISSubHead"><A HREF="#">Prodcut Name</A></div>
      <div class="ISList">
       <ul>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
        <li>Text here</li>
      </ul>
      </div>
    </div>
    </div>

之前可能会问这个问题.但是我找不到错误.这是来自新波士顿的视频教程.

$(document).ready(function(){
$('#btn').toggle(function(){
    $('#msg').html('yes');
},function(){
    $('#msg').html('No');
});
});

视频显示,当点击第一个div文本是肯定的,下次它显示否 但当我尝试时,当页面加载时,按钮淡出和div显示否.为什么？可能还有其他方法可以实现此功能.但为什么这不起作用.他将切换的语法显示为

$('#btn').toggle(function(){code},function{code});

我在HTML中有这段代码:

<!-- Toggle show hide -->
    <ng-container *ngFor="let plate of plates; let i=index">
      <button (click)="toggle(plate)">{{i}}. {{ buttonName }}</button>
      <span *ngIf="!show">
        <i>{{i}}</i>
        <h1>{{ plate.PlateNumber }}</h1>
      </span>
    </ng-container>

和角度代码:

toggle() {
    this.show = !this.show;

    // CHANGE THE NAME OF THE BUTTON.
    if (this.show)
      this.buttonName = "Show";
    else
      this.buttonName = "Hide";
  }

它工作正常,但我需要当我点击按钮它隐藏该特定<span>容器.我添加了图像来说明我想要做什么,但是当我按下按钮时它会隐藏所有元素.