标签: toggle

我正在努力让Andy Langton的表演/隐藏/迷你手风琴(http://andylangton.co.uk/jquery-show-hide)适应桌面.我想要创建一个事件列表,并在每个事件附加一个确认表单.点击最后一个单元格或行中的"确认"按钮后,我希望显示与此特定事件关联的表单.

安迪的代码使用

$('.toggle')
    .prev()
    .append('<a href="#" class="toggleLink">'+showText+'</a>');

在隐藏表单之前动态添加切换链接(确认按钮).但是,这会在表格行中添加链接,而不是在单元格中添加.因此,我已将其更改为

$('.toggle')
    .prev()
    .append('<td><a href="#" class="toggleLink">'+showText+'</a></td>');

链接现在位于正确的位置,但现在不会调用表单的显示/隐藏.当它被错误地放置时,功能有效,尽管不是很正确.我觉得调用切换操作的选择器不正确,但我不知道如何纠正它.目前是

$(this)
    .parent()
    .next('.toggle')
    .toggle('slow');

这基本上就是源代码的样子......

<table id="training-events">
<tr>
   <th>Date / Time</th>
   <th>Event / Venue</th>
   <th>Cost</th>
   <th>Confirm</th>
</tr>
<tr class="event" valign="top">
    <td class="date">Mon, 10 August 2009<br>03:30 PM - 05:30 PM</td>
    <td><h5>Regional Director Meeting</td>
    <td>No Charge</td>
    <td><a href="#" class="toggleLink">Cancel</a></td>
</tr>
<tr style="display: none;" class="toggle">
   <td colspan="4">
      ** FORM **
   </td>
</tr>
</table>

我试图能够使用相同的代码动态扩展/折叠多个div ....

它是通过单击一个跨度(切换)控制然后我试图获得下一个id(将上下滑动的div)

            $('span').toggle(
    function() {
$('#albumholder').slideToggle(600);
    $(this).html('-');},
    function() {
$('#albumholder').slideToggle(600);
    $(this).html('+');}

    );

这段代码可以扩展1 div ......但我假设我有一个div

#downloadholder
#linksholder
etc...

编辑

值得注意的是,我需要每个div独立切换.如果我单击影响#albumholder的跨度上的加号按钮,则不应展开#downloadholder或#linksholder

我目前有针对无法更改的过滤器的div类.我希望有一个.toggle,所以当单击一个部分时,其余部分将隐藏到下一个类".refinement_custom_category_section".目前它几乎正常工作,它只是隐藏在该部分下方的所有内容,当我只想在单击时隐藏该部分.

  <div class="refinement_custom_category_section">Find by Condition</div>
  <div class="refinement_filter"><a href="">New (52)</a></div>
  <div class="refinement_filter"><a href="">Used (7)</a></div>
  <div class="refinement_filter"><a href="">Overstock - New (2)</a></div>
  <div class="refinement_custom_category_section">Find by Section</div>
  <div class="refinement_filter"><a href="">1 Section (2)</a></div>
  <div class="refinement_filter"><a href="">2 Section (40)</a></div>
  <div class="refinement_filter"><a href="">3 Section (19)</a></div>
  <div class="refinement_custom_category_section">Find by Door Type</div>
  <div class="refinement_filter"><a href="">Solid Door (34)</a></div>
  <div class="refinement_filter"><a href="">Glass Door, Sliding (6)</a></div>
  <div class="refinement_filter"><a href="">Glass Door, Swing (21)</a></div>
  <div class="refinement_custom_category_section">Find by Exterior</div>
  <div class="refinement_filter"><a href="">Black (33)</a></div>
  <div class="refinement_filter"><a href="">Stainless Steel (28)</a></div>
  <div class="refinement_custom_category_section">Find by Height</div>
  <div class="refinement_filter"><a href="">34.5 …

我开始在我的设置场景中进行切换以打开/关闭背景音乐.我不知道如何只针对背景音乐进行此切换,因为我的游戏中还有其他效果.如何使切换仅影响我的应用中的背景音乐？

这里有一些凌乱的javascript:

$('.menu').mouseover(function () {
    $(this).animate({
    }, 500, function() {});
}).mouseout(function () {
    $(this).animate({
    }, 500, function() {});
});

我怎样才能让这个更小,而不是缩小,但是没有办法说"toggle"而不是"mouseover"那么"mouseout"？

谢谢

这是一个非常直截了当的问题.我基本上在页面上有一个div块,当点击时,它的大小会增加,再次点击时会返回到原来的状态.我的问题是它似乎根本不起作用.另外,我确信在两个动画状态之间切换的方式要比这样的if语句更清晰,但是我不确定如何去做.

$(document).ready(function(){
    var toggle = 0;
    $(".login").click(function(){
        if($toggle == 0){
            $(this).animate({
                height: '200',
            }, 500, function(){
            });
            $toggle = 1;
        }
        else if($toggle == 1){
            $(this).animate({
                height: '100',
            }, 500, function(){
            });
            $toggle = 0;
        }
    });
});

相应的HTML代码很简单

<div class="login">Click Me</div>

如果还有其他需要,请告诉我.

我正在开发一个带有Google地图应用程序的网页.目前,我有一个功能搜索栏和地图,显示三个KML/KMZ图层.我需要能够在每个层之间切换,要么显示其中一个,要么显示其中两个,要么全部三个.Google地球中有类似的功能,但我需要在Google地图中使用它.我怎样才能做到这一点？

这是我的地图和搜索栏的代码:

<script type="text/javascript">
    var geocoder;
    var map; 
    var marker;
  function initialize() {
    geocoder = new google.maps.Geocoder ();
    var latlng = new google.maps.LatLng (40.43, -74.00);
    var myOptions = {
      zoom: 5,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
        }
      map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
      marker = new google.maps.Marker({map:map});

    var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/NY_Radar_data.kmz');
        ctaLayer.setMap(map);
    var ctaLayer = new google.maps.KmlLayer('http://www.nyc.gov/html/dot/downloads/misc/cityracks.kml');
        ctaLayer.setMap(map);
    var ctaLayer = new google.maps.KmlLayer('http://dl.dropbox.com/u/80233620/OKX_Radar_data%20(1).kmz');
        ctaLayer.setMap(map);
        }
    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status) …

这可能非常简单,但是大约凌晨2点并且变得非常困倦:)

我有一个简短的脚本,"slideToggle"div不显示.

$('#cmnt_add').click(function () { $('.dark_div_add').slideToggle(1100); });

是否有机会进行一次锻炼,所以如果打开未显示的DIV,点击相同的链接将无法做到这一点？

先感谢您!

我之前已经多次询问过这个问题,但是没有任何建议的解决方案似乎适用于我的Toggle()问题;

上下文:我对该页面有一些"提示"(div.tips).在移动设备上,我希望用户能够单击名为Tips(button.tips)的按钮,并在按钮下弹出内容.然后,他们可以单击按钮,内容将再次消失.

我在网站的移动版本上使用Toggle,我使用这两行获得窗口的宽度:

var windowsize = $(window).width();

$(window).resize(function() {
    var windowsize = $(window).width();
});

所以,我有两个实例需要为移动网站移动,所以我使用appendTo()来实现这一点.这是问题代码1:

$("div.results").hide();

$("div.result-summary").click(function () {
        $("div.result-summary").hasClass("active-result");
        $("div.result-summary").removeClass("active-result");

        $(this).toggleClass("active-result");

        if (windowsize < 1015) {
            $("div.results").appendTo(this);
            $("div.results").toggle();
        } else {
            $("div.results").show();
        }
});

第一部分工作正常,因此正在加载jQuery.这if (windowsize < 1015) {部分根本没有得到浏览器的反应.另外,我在控制台中没有错误.

问题代码2大致相同:

if (windowsize < 1015) {
        $("div.tips").hide();
                    $("div.tips").appendTo("div.append");

        $('button.tips').click(function(){
            $("div.tips").toggle();
        });
}

再一次,浏览器中没有任何反应,我没有得到控制台错误.

我有一种感觉,问题在于windowsize < 1015线路,但之前曾经工作过,现在没有,所以我不确定是什么了!

有任何想法吗？:)

GatsbyJS初学者在这里，尝试获取布尔玛响应式菜单切换，以将“ is-active”类应用于菜单（具有Gatsby Starter Netlify CMS的Gatsby v2）。所有代码在这里：https : //github.com/pddew/gatsby-starter-netlify-cms

当前，切换按钮和脚本标签出现，但是按钮没有响应。

gatsby入门企业中有一个有效的版本-当我检查并与之比较时，我无法发现错误，只是应该在切换按钮上没有事件监听器。当我检查站点时，将调用toggle.js脚本，并将其放在关闭body标记之前，然后进行查看。

我试过没有运气的构建和部署，清除缓存并将脚本替换为bulma的建议代码。

这是相关的代码。任何帮助，我们将不胜感激；我有点卡住了！

在Layout.js中：

    import React from 'react' import Helmet from 'react-helmet'

import Navbar from '../components/Navbar' import Footer from '../components/Footer' import './all.sass'

const TemplateWrapper = ({ children }) => (   <div>
    <Helmet title="Immediate Start Jobs" />
    <Navbar />
    <div>{children}</div>
    <Footer />   </div> )

export default TemplateWrapper

在导航栏中：

<button className="button navbar-burger" data-target="navMenu">
      <span />
      <span />
      <span />
    </button>
  </div>
  <div className="navbar-menu" id="navMenu">
    <div className="navbar-start">
      <Link className="navbar-item" to="/about">
        About
      </Link> …