css - Jquery 可折叠/可展开的 div 内容包装到 3 列页面的下一列中

Question

我有一个使用 css3 列的 3 列 div 的页面。 div 内部是可折叠/可展开的无序列表。其中一些太长了，以至于当它们展开时，列表项会换行到下一列。这看起来有点古怪，我想知道是否有人有更好的替代解决方案来显示所有这些看起来更好的数据。无论如何，有没有办法阻止它进入下一列，只是让那一列自动变高？

这是我页面的链接

http://tinyurl.com/afuswcs

(另请注意，在靠近顶部的第二列或第三列上单击一个时，展开后会跳转到上一列)

    <script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".wine-type-list-ul").hide();
  //toggle the componenet with class msg_body
  jQuery(".tax-term-heading").click(function()
  {
    jQuery(this).next(".wine-type-list-ul").slideToggle(500);
  });
});
</script>
<style> h5 {cursor: hand; cursor: pointer; ;color:#BE883B; font-size:14pt; padding-bottom:none; margin-bottom:none;  padding-left:10%;} 
.wine-type-list-ul{display:block;}
.wine-type-list-li{width:100%; display:block;padding-left:10%;}
.winery-by-wine-types {}
</style>
<?php


$post_type = 'wineries';
$tax = 'wine-types';
$tax_terms = get_terms($tax,'hide_empty=0');
//list the taxonomy


echo'<div style="clear:both;" class="winery-by-wine-types">';?>
<p align="center" style="padding-bottom:10px; word-spacing:2px; padding-top:20px; font-size:16pt; color:#BEB585;">Full List of Wineries by Wine Types:</p>
<?php
echo '<style>.wine-type-list {font-size:11pt;}</style>
<div style="-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;"> 
';
//list everything
if ($tax_terms) {
  foreach ($tax_terms  as $tax_term) {
    $args=array(
      'post_type' => $post_type,
      "$tax" => $tax_term->slug,
      'post_status' => 'publish',
      'posts_per_page' => -1,
      'caller_get_posts'=> 1,
      'orderby'=>'title' ,
       'order'=>'ASC' 
    );

    $my_query = null;
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) {



 echo "<h5 class=\"tax-term-heading\" id=\"".$tax_term->slug."\"> $tax_term->name </h5><ul class=\"wine-type-list-ul\">";
      while ($my_query->have_posts()) : $my_query->the_post(); ?>
        <li class="wine-type-list-li"><a class="wine-type-list" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
        <?php
      endwhile;

      echo'<p></ul>';



    }

    wp_reset_query();
  }echo'</div></div>';
}
?>

Answer 1

不要为此使用列。将 PHP 代码中的元素分成三个，并在每个元素周围放置一个 DIV 标记。然后在 DIV 上放置一些样式以将它们 float 到左侧:

    <div style="float:left;width:33.33%";>

请记住在末尾创建一个 DIV，或者在标签的包装器上使用 clearfix 类:

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

您的示例已修复:

<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery(".wine-type-list-ul").hide();
        //toggle the componenet with class msg_body
        jQuery(".tax-term-heading").click(function()
        {
            jQuery(this).next(".wine-type-list-ul").slideToggle(500);
        });
    });
</script>
<style>
    h5 {cursor: hand; cursor: pointer; ;color:#BE883B; font-size:14pt; padding-bottom:none; margin-bottom:none;  padding-left:10%;} 
    .wine-type-list-ul{display:block;}
    .wine-type-list-li{width:100%; display:block;padding-left:10%;}
    .winery-by-wine-types {}
</style>
<?php

    $post_type = 'wineries';
    $tax = 'wine-types';
    $tax_terms = get_terms($tax,'hide_empty=0');
            //list the taxonomy


    echo'<div style="clear:both;" class="winery-by-wine-types">';
?>

<p align="center" style="padding-bottom:10px; word-spacing:2px; padding-top:20px; font-size:16pt; color:#BEB585;">Full List of Wineries by Wine Types:</p>

<?php
    echo '<style>.wine-type-list {font-size:11pt;}</style><div><div style="float:left;width:33.33%">';

    //list everything
    if ($tax_terms)
    {
        $totalLength = count($tax_terms);
        $splittedLength = $totalLength / 3;
        $i = 0;
        foreach ($tax_terms  as $tax_term)
        {
            $i++;

            $args=array(
                'post_type' => $post_type,
                "$tax" => $tax_term->slug,
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'caller_get_posts'=> 1,
                'orderby'=>'title' ,
                'order'=>'ASC' 
                );

            $my_query = null;
            $my_query = new WP_Query($args);

            if( $my_query->have_posts() )
            {
                if ($i == $splittedLength)
                {
                    if ($i != 1)
                    {
                        echo '</div>';
                    }

                    if ( $i != $totalLength )
                    {
                        echo '<div style="float:left;width:33.33%">';
                    }
                }

                echo "<h5 class=\"tax-term-heading\" id=\"".$tax_term->slug."\"> $tax_term->name </h5><ul class=\"wine-type-list-ul\">";

                while ($my_query->have_posts()) : $my_query->the_post();

?>
                <li class="wine-type-list-li"><a class="wine-type-list" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php

                the_title();


                echo'</a></li>';

                endwhile;

                echo'<p></ul>';

                if ($i == $splittedLength)
                {
                    $i = 0;
                }
            }

            wp_reset_query();
        }

        echo'</div></div>';
    }
?>