Question

我有一个反馈面板，但问题是当你点击它时导航会覆盖反馈面板的一些内容。

如上图所示，电子邮件输入字段已被阻止。

问题

我想要做的是，当用户点击反馈时，<nav>将浮动到左侧，以便用户可以输入他们想要的内容，然后再次点击feedback nav返回center。

导航栏css

nav{
text-align:center;
}

HTML

<div class="panel">
    <h3>Sliding Panel</h3>
    <p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>

    <p>This panel is placed on the right instead of on the left. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>



<div style="clear:both;"></div>

Answer 1

为什么不将反馈面板上的z-index设置为50（如果它出现在DOM中的导航之前，则为更多）。这样它就会出现在导航器上方，你不必担心将导航器移开。

否则，如果您确实想要在显示反馈面板时将导航器移开，您可以执行以下操作：

$('.feedback-button').click(function(){
    $('nav').toggleClass('moved');
   /* whatever else you do when the feedback button is clicked */
});

哪个会切换＆＃34;移动＆＃34;每当单击反馈按钮时，nav元素上的类。这是假设某个反馈按钮存在于类＆＃34;反馈按钮＆＃34;。

然后你可以像这样设置一些css：

nav.moved {
  -webkit-transform:translate(-100px,0);
  transform:translate(-100px,0);
}

当设置移动的类时，将导航向左移动100个像素。

如果您希望它设置动画，您也可以添加一个转换到nav元素。

nav {
  -webkit-transition:transform 1s ease-in-out;
  transition:transform 1s ease-in-out;
}

Answer 2

javascript

<script type="text/javascript">
$(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("fast");
        $('nav').toggleClass('moved');
        $(this).toggleClass("active");
        return false;
    });
});
</script>

<强> CSS

.moved{
float:left;
}

使导航浮动的问题

2 个答案: