如何显示当前点击的帖子

Hello I have portfolio list and i want to display the content of currently clicked item of the portfolio. Here is my code. When I click on one of the item it shows content from all of them.

<div class="row">
     <?php
        // The Query
        $the_query = new WP_Query( array( 'post_type' => 'portfolio', 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page'=>-1 ) );
        $i = 0;
        // The Loop
        while ( $the_query->have_posts() ) : $the_query->the_post();                                        
            $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id ( $the_query->ID ), 'thumbnail' );
     ?>  
    <div class="col-4">
        <div class="portf" data-toggle="show" data-target="#show">
            <div class="work" data-work="<?php echo $i; ?>">
                <img src="<?php echo $thumbnail[0]; ?>" alt="" title=""> 
            </div>
        </div>
    </div>
<?php $i++; endwhile; ?>
</div>

<div class="show" id="show">
    <div class="show-dialog">
        <div class="show-content">
            <?php
            // The Query
            $the_query = new WP_Query( array( 'post_type' => 'portfolio', 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page'=>-1 ) );

            // The Loop
            while ( $the_query->have_posts() ) : $the_query->the_post();                                        
                $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id ( $the_query->ID ), 'thumbnail' );
            ?>  
            <div class="header">
                <h4 class="title"><?php the_title(); ?></h4>
            </div>
            <div class="show-body">
                <p>
                    <?php the_content(); ?>                        
                </p>
            </div>
            <?php endwhile; ?>          
        </div>
    </div>
</div>

Try this code :

<div class="row">
     <?php
        // The Query
        $the_query = new WP_Query( array( 'post_type' => 'portfolio', 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page'=>-1 ) );
        $i = 0;
        // The Loop
        while ( $the_query->have_posts() ) : $the_query->the_post();                                        
            $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id ( $the_query->ID ), 'thumbnail' );
     ?>  
    <div class="col-4">
        <div class="portf" data-toggle="show" data-target="#show<?php echo $i; ?>">
            <div class="work" data-work="<?php echo $i; ?>">
                <img src="<?php echo $thumbnail[0]; ?>" alt="" title=""> 
            </div>
        </div>
    </div>
    <?php $i++; endwhile; ?>
</div>

<?php
// The Query
$the_query = new WP_Query( array( 'post_type' => 'portfolio', 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page'=>-1 ) );
$i = 0;
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();                                        
    $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id ( $the_query->ID ), 'thumbnail' );
?>  
<div class="show" id="show<?php echo $i; ?>">
    <div class="show-dialog">
        <div class="show-content">
            <div class="header">
                <h4 class="title"><?php the_title(); ?></h4>
            </div>
            <div class="show-body">
                <p>
                    <?php the_content(); ?>                        
                </p>
            </div>          
        </div>
    </div>
</div>
<?php $i++; endwhile; ?>  

This is creating a seperate 'show' div for each of your portfolio items, with incrementing id's (eg. #show1, #show2 etc.)

Then i've changed your data-target so that it should inlude these ID's and increment also :

<div class="portf" data-toggle="show" data-target="#show<?php echo $i; ?>">