Как сделать каждый запрос коллапсом php

У меня есть этот код PHP и jQuery, который работает в коалиции с моей базой данных. Это единственная страница. Код запускается и дает мне строку данных, но когда я нажимаю кнопку свернуть, она работает только для первой строки. Даже если я нажимаю любую другую строку, это действие влияет только на первую строку, а все остальные строки сворачиваются, что бесполезно.Как сделать каждый запрос коллапсом php

Как сделать так, чтобы все строки работали? Это похоже на то, что кнопка удваивается и работает только для первой строки.

<script> 
    $(function() { 
    $('div#dl_box').on('show', function(e) { 
     console.log('show', $(e.target).attr('class'), $(e.target).attr('id')); 
     $(e.target).prev('.accordion-heading').addClass('active'); 
    }); 

    $('div#dl_box').on('hidden', function(e) { 
     console.log('hidden', $(e.target).attr('class'), $(e.target).attr('id')); 
     $(e.target).prev('.accordion-heading').removeClass('active'); 
    }); 

    }); 
    $(document).ready(function() {}); 

</script> 

<?php 
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', '')); 
    ((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db')); 

    $query = "SELECT * FROM AS_Questions"; 
    $result = mysqli_query($GLOBALS["___mysqli_ston"], $query); 
    if (!$result) { 
     printf("Errormessage: %s\n", $mysqli->error); 
    } 

    echo "<table>"; 

    while($row = mysqli_fetch_array($result)){ 
    echo " 
    <section class='section swatch-white editable-swatch'> 
     <div class='container'> 
      <div class='panel panel-primary panel-ws-download'> 
       <div class='panel-heading'> 
        <a href='#group_accordion_stable' class='accordion-toggle collapsed' data-parent='#accordion_download' data-toggle='collapse'> 
        " . $row['Question'] . " 
        </a> 
       </div> 
       <div id='group_accordion_stable' class='panel-collapse collapse' style='height: 0px;'> 
        <div class='panel-body'> 
         <!-- first --> 
         <ul class='list-unstyled list-ws-download'> 
          <li>" . $row['Answer'] . "</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

    "; //$row['index'] the index here is a field name 
    } 

    echo "</table>"; //Close the table in HTML 

    ((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection 
    ?>

источник

2016-02-03 Mohamed Athif

Это полный код на вашей странице? Потому что в вашей части 'js' вы нацеливаете элементы с id' dl_box' и с классом 'accordion-heading', но я не могу найти их в вашей' html' части? – pgk

образец для u.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.default { 
    display: block; 
    background: pink; 
    height: 3em; 
    width: 10em; 
    transition: height 5s, background 3s; /*collaspe speed*/ 
    margin-top: 1em; 
} 

.expanded { 
    height: 10em; 
    background: yellow; 
    transition: height 1s, background 2s; /*expand speed*/ 
    /*display: none;*/ 
} 
</style> 
</head> 
<body> 
<?php 
$i = 0; 
while ($i <5) { 
    $i++; 
    echo '<div class="default" id="ChangeThisId_'.$i.'">'; 
     echo ' 
      <a href="#" 
      name="ChangeThisId_'.$i.'"  
      onclick="changeHeight(this.name)"> 
      Click me '. $i .' 
      </a> 
      '; 
    echo '</div>'; 
} 
// above return in html. 
// <div class="default" id="ChangeThisId_1"> 
// <a href="#" name="ChangeThisId_1">CLick me 1</a> 
// </div> 
// <div class="default" id="ChangeThisId_2"> 
// <a href="#" name="ChangeThisId_2">Click me 2</a> 
// and so on till ...5 
?> 
</body> 
<script> 
function changeHeight(x){ 
    //alert(x); //x return name of clicked <a> tag. 
    document.getElementById(x).classList.toggle("expanded");  
} 
</script> 
</html>

Это с помощью CSS, HTML (+ PHP для создания строки), а родной JavaScript. Идея состоит в том, чтобы назначить уникальную для каждой строки. другие вполне понятны, надеюсь, что это поможет.

источник

2016-02-03 15:00:26

любому, кто придет сюда, в поисках отображения данных sql с аккордеонным развалом. здесь Qid - это мои автоматически увеличивающиеся значения. AS_Questions - это мое имя таблицы. db - это мое имя базы данных.

<link rel="stylesheet" href="bootstrap.min.css"> 
<link rel="stylesheet" href="bootstrap-theme.min.css"> 
<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
</head> 
<body> 



<?php 
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', 'password')); //The Blank string is the password 
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db')); 

$query = "SELECT * FROM AS_Questions"; 
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query); 
if (!$result) { 
    printf("Errormessage: %s\n", $mysqli->error); 
} 

echo "<table>"; 


while($row = mysqli_fetch_array($result)){ 

echo " 


<div class='panel-group' id='accordion'> <!-- accordion 1 --> 
    <div class='panel panel-primary'> 

     <div class='panel-heading'> <!-- panel-heading --> 
      <h4 class='panel-title'> <!-- title 1 --> 
      <a data-toggle='collapse' data-parent='#accordion' href='#accordion" . $row['Qid'] . "'> 
       " . $row['Question'] . "&nbsp;&nbsp;&nbsp;<i class='fa fa-eye' style='float: right;'></i> 
      </a> 
      </h4> 
     </div> 
     <!-- panel body --> 
     <div id='accordion" . $row['Qid'] . "' class='panel-collapse collapse'> 
      <div class='panel-body'> 
      " . $row['Answer'] . " 
      </div> 
    </div> 
</div> 


"; //$row['index'] the index here is a field name 
} 

echo "</table>"; //Close the table in HTML 

((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection 
?>

источник

2016-02-03 20:57:32

Как сделать каждый запрос коллапсом php

ответ

Смежные вопросы