簡體   English   中英

帶有嵌套ul的ul上的jquery石工

[英]jquery masonry on ul with nested ul

我正在嘗試創建彼此嵌套級別的站點地圖的頁腳導航。 我想使用磚石結構,因此填充和邊距是一致的,不會根據嵌套項目而更改。 它的射擊砌體,但如果我更改砌體調用以僅選擇first()ul,然后將嵌套li出現在一行上,則會向嵌套ul添加相對樣式。

有任何想法嗎?

 <div id="links">
            <ul >
                <li class="box"><a href="/Industries.aspx"  >Industries</a></li>
                <li class="box"><a href="/Services.aspx"  >Services</a></li>
                <li class="box"><a href="/Quality---Regulatory.aspx"  >Quality &amp; Regulatory</a></li>
                <li class="box"><a href="/About.aspx"  >About</a>
                    <ul >
                        <li class="box"><a href="/About/Our-Story.aspx"  >Our Story</a></li>
                        <li class="box"><a href="/About/Our-Mission.aspx"  >Our Mission</a></li>
                        <li class="box"><a href="/About/Our-Core-Values.aspx"  >Our Core Values</a></li>
                   </ul>
              </li>
              <li class="box"><a href="/News.aspx"  >News</a>
                   <ul >
                       <li class="box"><a href="/News/Events.aspx"  >Events</a></li>               
                   </ul>
              </li>
              <li class="box"><a href="/Careers.aspx"  >Careers</a></li>
              <li class="box"><a href="/Contact.aspx"  >Contact</a></li>
              <li class="box"><a href="/tests.aspx"  >tests</a></li></ul>
       </div>

 <script type="text/javascript">

    $('#links ul').masonry({

        singleMode: true,

        // Disables measuring the width of each floated element.
        // Set to true if floated elements have the same width.
        // default: false

        columnWidth: 182,

        // Width in pixels of 1 column of your grid.
        // default: outer width of the first floated element.

        itemSelector: '.box:visible',

        // Additional selector to specify which elements inside
        // the wrapping element will be rearranged.
        // Required for Infinite Scroll with window resizing.

        resizeable: true,

        // Binds a Masonry call to window resizes 
        // so layout appears fluid.
        // default: true

        animate: false,

        // Animates layout rearrangements.
        // default: false

        saveOptions: true

        // Masonry will use the options from previous Masonry
        // calls by default, so you only have to enter in options once
        // default: true
    });
</script>

我知道這已經很老了,但是這個砌體選項可能會幫助您。

containerStyle: { position: 'absolute' }

使用jQuery石工與絕對位置父級?

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM