Question

如果点击value Age (multilabel);按钮，如何移动Contact下面的Close按钮？目前它是#panel。

＆＃13;

fixed

＆＃13;

jQuery('.sub-menu').addClass('dropdown-menu');

jQuery(document).ready(function($) {

$('ul.nav li.dropdown, ul.nav li.dropdown-submenu').hover(function() {
    $(this).find(' > .dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
    $(this).find(' > .dropdown-menu').stop(true, true).delay(200).fadeOut();
});
var abierto = false;
jQuery("#open").click(function() {
    if (!abierto) {
        jQuery("div#panel").slideDown("slow");
        jQuery("#open").html("Close");
        abierto = true;
    } else {
        jQuery("div#panel").slideUp("slow");
        jQuery("#open").html("Contact us");
        abierto = false;
    }
});


});

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
    height:3000px;
}

#panel {
        width: 100%;
        height: auto;
        color: #fff;
        overflow: hidden;
        position: fixed;
        z-index: 3;
        display: none;
        margin-left:10px;
        background:blue;
        padding:15px;
        margin-top: -1px;
        -webkit-border-bottom-right-radius: 10px;
        -webkit-border-bottom-left-radius: 10px;
        -moz-border-radius-bottomright: 10px;
        -moz-border-radius-bottomleft: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    /*
      Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
      CSS from:       http://codepen.io/transportedman/pen/NPWRGq
      and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
      Inspired from:  http://codepen.io/Rowno/pen/Afykb 
    */
    .carousel-fade .carousel-inner .item {
      opacity: 0;
      transition-property: opacity;
    }

    .carousel-fade .carousel-inner .active {
      opacity: 1;
    }

    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .carousel-fade .carousel-inner .next.left,
    .carousel-fade .carousel-inner .prev.right {
      opacity: 1;
    }

    .carousel-fade .carousel-control {
      z-index: 2;
    }

    /*
      WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
      Need to override the 3.3 new styles for modern browsers & apply opacity
    */
    @media all and (transform-3d), (-webkit-transform-3d) {
        .carousel-fade .carousel-inner > .item.next,
        .carousel-fade .carousel-inner > .item.active.right {
          opacity: 0;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.prev,
        .carousel-fade .carousel-inner > .item.active.left {
          opacity: 0;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
        .carousel-fade .carousel-inner > .item.next.left,
        .carousel-fade .carousel-inner > .item.prev.right,
        .carousel-fade .carousel-inner > .item.active {
          opacity: 1;
          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
        }
    }

    .shortcode input[type="text"], 
    .shortcode input[type="email"], 
    .shortcode input[type="url"], 
    .shortcode input[type="password"], 
    .shortcode input[type="search"], 
    .shortcode select {
        padding: 13px !important;
        width: 100% !important;
        height: 43px !important;
        margin-bottom: 7px !important;
        color: #707070 !important;
        border: 1px solid #c2c2c2 !important;
        font-family: "Crimson Text" !important;
        font-style: italic !important;
        font-size: 14px !important;
        border-radius: 0px !important;
        outline: none !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .shortcode textarea {
        overflow: auto;
        padding-left: 3px;
        vertical-align: top;
        padding: 15px !important;
        width: 100%;
        height: 142px;
        border-radius: 0px;
        border: 1px solid #c2c2c2 !important;
        margin-bottom: 7px !important;
        color: #707070 !important;
        font-family: "Crimson Text" !important;
        font-style: italic !important;
        font-size: 14px !important;
        outline: none !important;
    }

    input.wpcf7-form-control.wpcf7-submit {
        border-radius: 0px !important;
        box-shadow: none !important;
        text-shadow: none !important;
        background: #898989 !important;
        color: #fff !important;
        width: 100% !important;
        height: 43px !important;
        outline: none !important;
        font-family: lato !important;
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }

    .carousel-indicators {
        display:none;
    }

    #toppanel {
        position: absolute;
        right: 10px;
        z-index: 400000;
        width: 100%;
    }
    
    .tab {
      background:#ccc;
      width:100px;
    }

＆＃13;

Answer 1

单击“联系我们”时，您可以添加一个类来定位面板下方的按钮。

CSS

.close {
    position:absolute;
    top: 280px;
}

的Javascript

$('.tab').addClass('close');

再次点击时将其删除

$('.tab').removeClass('close');

JSFiddle

Answer 2

为什么不只是在面板中添加一个切换幻灯片的按钮？这个按钮会移动＆＃34;与面板，自然。并且根本不需要jquery。

Answer 3

首先：最好在$(this)

中使用$('#open')代替.click()

第二：将此添加到您的CSS：

.contact-details{ position:relative; }

将您的$('#open').click()更改为此

JS Fiddle

var abierto = false;
jQuery("#open").click(function() {
  if (!abierto) {
    var h = $('#panel').height() + 40;
    jQuery("div#panel").slideDown("slow");
    $(this).html("Close");
    $(this).parents('.contact-details').animate({'top': h}, 600);
    abierto = true;
  } else {
    jQuery("div#panel").slideUp("slow");
    $(this).html("Contact us");
    $(this).parents('.contact-details').animate({'top': 0}, 700);
    abierto = false;
  }
});

使用jQuery移动按钮

3 个答案: