Нежелательное поведение аккордеонной таблицы при отображении модального окна - PullRequest
Новая
       91

Нежелательное поведение аккордеонной таблицы при отображении модального окна

0 голосов
/ 21 июня 2020

У меня есть стол, работающий как аккордеон, который скрывает ряд внизу. При нажатии на строку строка расширяется и скрывается, как и ожидалось. Моя проблема связана с кнопкой, которая загружает модальное окно для отображения / скрытия информации или небольшую форму. Когда появляется модальное окно, любое событие щелчка мыши также будет переключать скрытую строку.

Есть ли способ предотвратить продолжение переключения строки событием щелчка мыши?

Упрощенный вывод HTML код из скомпилированного проекта: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Table Accordion</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <table class="table table-condensed table-striped" style="width:1500px; border-collapse:collapse;">
            <thead>
                <tr>
                    <th>Col 1 Header</th>
                    <th>Col 2 Header</th>
                    <th>Col 3 Header</th>
                </tr>
            </thead>
            <tbody>
                <tr data-toggle="collapse" data-target="#AccRow" class="accordion-toggle">
                    <td>col 1</td>
                    <td>col 2</td>
                    <td>col 3 Modal:
                        <div class="container">
                            <!-- Trigger the modal with a button -->
                            <button type="button" class="btn btn-primary" style="width:150px" data-toggle="modal" data-target="#myModal" data-backdrop="static">Open Small Modal</button>

                            <!-- Modal -->
                            <div class="modal fade" id="myModal" role="dialog">
                                <div class="modal-dialog modal-sm">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h4 class="modal-title">Modal Header</h4>
                                        </div>
                                        <div class="modal-body">
                                            <p>This is a small modal.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" class="hiddenRow" style="padding: 0 !important;">
                        <div class="accordian-body collapse" id="AccRow">
                            hidden row
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Ближайший вопрос и ответ, который я нашел, был здесь: Bootstrap: Нежелательное поведение аккордеона

Я пробовал добавление раздела сценария с ответами на вопрос, на который дан ответ, но я все еще не могу заставить его работать: 

<script type="text/javascript" language="javascript">
    $("myModal").on('click', function (e) { e.preventDefault(); })
</script>

Подводя итог проблеме: после появления модального окна фон должен оставаться неизменным c , но при щелчке рядом с модальным окном или даже внутри него скрытая строка продолжает переключаться.

Есть идеи?

Спасибо

...