Question

我需要一些关于如何完成此操作的帮助/指导，我想要做的是在单击单个链接后从左侧向右滑动div。但到目前为止，我正在努力解决它，所以我的问题是如何做到这一点？

这是我到目前为止所做的。

CSS：

.main-header {
  width: 1020px;
  height: 50px;
  background: #555;
  border: 2px solid #444;
  border-top: none;
    -moz-border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
    border-radius: 0 0 25px 25px;
    -moz-box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;
  position: fixed;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
  top: 0;
}
.main-header h1 { width: 1020px; float: left; text-align: center; }
.toggle-menu {
  width: 44px;
  height: 44px;
  padding: 6px 0 0 12px;
  margin: 0;
  border-right: 2px solid #444;
  position: absolute;
  top: 0;
  color: #FFF;
  font-size: 26px;
  text-shadow: -1px -1px 1px #000, 1px 1px 2px rgba(204, 204, 204, 0.9);
  cursor: pointer;
}
.page-wrap { float: left; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
.main-nav-check { display: none; }
.main-nav {
  width: 0;
  position: fixed;
  top: 100px;
  overflow: hidden;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}
.main-nav .default_logo {
  width: 150px;
  height: 120px;
  padding: 0;
  margin: 0 0 0 15px;
  background: url(../images/Profiles/default_logo1.png) no-repeat 0 0;
  border: 2px solid #444;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000;
  float: left;
}
.main-nav a {
  padding: 5px 15px;
  margin: 0 0 0 169px;
  border-bottom: 1px solid #444;
  display: block;
  position: relative;
  top: 12px;
  color: #15ADFF;
  font: 18px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: -1px -1px 1px #000, 1px 1px 2px rgba(204, 204, 204, 0.9);
}
.main-nav a:hover, .main-nav a:focus { background: rgba(204, 204, 204, 0.2); border-right: 7px solid #15ADFF; color: #111; }
#main-nav-check:checked + #main-nav { width: 350px; }
.close-menu { display: none; }
#main-nav-check:checked ~ .page-wrap .open-menu { display: none; }
#main-nav-check:checked ~ .page-wrap .close-menu { display: block; }

HTML：

<input type="checkbox" class="main-nav-check" id="main-nav-check" />
            <nav class="main-nav" id="main-nav">
                <div class="default_logo"></div>
            <a href="#">Profile Settings</a>
            <a href="#">Recent Updates</a>
                        <a href="#logoff">Sign Out</a>
            </nav>
            <div class="page-wrap">
                <header class="main-header">
                <label for="main-nav-check">
                        <div class="toggle-menu" title="Options">☰</div>
                    </label>
            </header>
            </div>

如果我点击左侧的链接，我会尝试将其设置在哪里，让我们说'配置文件设置'，新的div打开并向右滑动。一旦从左侧点击链接，我就需要为每个单独的链接显示右侧div中的内容，但我正在努力解决它。如果有人可以提供一个jsfiddle，我会非常感激和/或回复其他代码来使这项工作，我再次非常感谢。

这是我到目前为止的一个小问题：http://jsfiddle.net/xP9wy

Answer 1

尝试此更改的 http://jsfiddle.net/xP9wy/4/

<强> HTML

<nav class="main-nav" id="main-nav"> <div class="leftside"> <div class="default_logo"></div> <a href="#profile" class="head">Profile Settings</a> <a href="#updates" class="head">Recent Updates</a> <a href="#logoff">Sign Out</a> </div> <div class="rightside"> <div id="profile" class="section"> profile </div> <div id="updates" class="section"> updates</div> </div> </nav>

<强> CSS

#main-nav-check:checked + #main-nav { width: 750px; } .leftside{ float:left; width: 350px; } .rightside{ margin-top:5px; float:right; width:350px; } .rightside .section{ border:#ccc 1px solid; display:none; margin-left:10px; padding:10px; }

<强>的Javascript

$(document).ready(function(){ $('a.head').click( function(){ var a = $(this) ; var section = $( a.attr('href') ); section.removeClass('section'); $('.section').hide(); section.addClass('section'); if(! section.is(':visible') ){ section.fadeIn(500); }; }); });

Answer 2

我的例子并不完美，主要是css，但我认为这与你所寻找的一致。

jsFiddle here

主要思想是使用jQuery的.append()方法将新元素附加到DOM，然后使用标准的jQuery选择器和方法（在链中）根据需要重新定位事物。

$('.page-wrap').append('<div id="proset"></div>');

和

$('#proset')
    .hide()
    .css({
        'background-color':'yellow',
        'position':'absolute',
        'left':'150',
        'padding':'20px 10px',
    })
    .html('Click in Me')
    .slideDown(1500);

请注意，由于注入了新元素，因此必须使用.on()事件处理程序来捕获单击事件等。

以下是为动画添加一些额外的jQuery闪光的一些链接：

sliding elements

various animations

使链接滑动并打开一个新的div

2 个答案: