Question

我在显示和隐藏文本框时遇到问题。

您可以在以下位置查看：http://jsfiddle.net/CVPSg/

问题：

我想点击<li><a href="# " title=" ">About</a></li> 并显示来自屏幕左侧的<aside id="aboutBox">（显示：无）

然后，我想用<aside id="aboutBox">

关闭<h2><a href="#" title=" ">Close X</a></h2>

此外，<aside id="aboutBox">不会隐藏和/或不再向左移动以显示任何内容。

它一直移动到屏幕右侧。

我希望这是有道理的。

我也在这里添加了代码：

HTML

<ul class="extras">
          <li><a href="# " title=" ">About</a></li>
            <!-- <li>Blog</li> For the future -->
            <li class="hidesearch showsearch">
                <form action="http://www.racamstudio.com/searchSubmit" method="post" name="seachform">
                    <input type="text" id="searchInputRight" value="Search..." in-focus="false" name="searchText">
                    <input width="16" height="16" type="image" id="searchbuttonRight" alt="Submit" name="submit" src="http://www.racamstudio.com/resources/images/search_icon_over.gif">
                </form>
            </li>
        </ul><!-- end extras-->


        <aside id="aboutBox">
            <h1>Welcome</h1>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
            <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
              <h2><a href="#" title=" ">Close X</a></h2>
         </aside><!-- end aboutbox -->

的Javascript

$(function() {
    // slideshow
    var currentPosition = 0;
    var slideWidth = 340;
    var slides = $('#aboutBox');
    var numberOfSlides = 2; // slides.length: show all images 
    // Remove scrollbar in JS - It is added in CSS for user how does not have js enable
    $('#aboutBox').css('overflow', 'hidden');
    // Wrap all .slides with #slideInner div 
    // variable slides = #aboutBox
    slides.wrapAll('<div id="wrapAbout"></div>').css({
        'display': 'none'
    });

    $('#wrapAbout').css('width', '340px');

    // Create event listeners for .controls clicks
    $('.extras li a').bind('click', function() {
        // Determine new position
        currentPosition = ($(this).attr('id') == 'left') ? currentPosition + 1 : currentPosition - 1;
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#aboutBox').animate({
            'marginLeft': slideWidth * (-currentPosition),
            'display': 'block'
        });
    });
    // manageControls: Hides and shows controls depending on currentPosition
    function manageControls(position) {
        // Hide left arrow if position is first slide
        if (position == 0) {
            $('#aboutBox').hide()
        } else {
            $('#aboutBox').show()
        }
    }
});

Answer 1

您不希望幻灯片放出overflow:hidden，您希望在包装器上使用margin-left。您不想为display或var slideWidth = 340; var slides = $('#aboutBox').css('width', slideWidth); slides.css({ width: slideWidth, height: slides.attr('scrollHeight') }); var wrapper = slides.wrap('<div>').parent().css({ width: 1, height: slides.height(), overflow: 'hidden', display: 'none' }); $('#show').click(function() { if(wrapper.is(':visible')) return; wrapper.show().animate({ width: '+=' + slideWidth }, 'slow'); }); $('#hide').click(function() { wrapper.animate({ width: 1 }, 'slow', function() { wrapper.hide(); }); });设置动画，您希望为包装器的宽度设置动画。也没有必要绝对定位你的滑出。此外，您可以通过在单独的处理程序中处理显示和隐藏操作来简化操作：

id

我稍微调整了HTML和CSS：我在节目中添加了#aboutBox个属性并隐藏了链接并删除了{{1}}的所有定位：http://jsfiddle.net/ambiguous/mp7aR/

Jquery滑出/在盒子里

1 个答案: