элементы с "display: none" остаются видимыми

ProgramBox

элементы с «display: none» остаются видимыми

Post author:admin
Запись опубликована:5 апреля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Как я упоминал в теме, даже несмотря на то, что я установил стиль, чтобы не отображать определенную часть приведенного ниже кода, он все равно отображается на странице. Должен ли я включать часть кода в отдельную таблицу? Пожалуйста, дайте свои предложения о том, в чем может быть проблема.

 <div id="submit">
<table
    style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
    ; border="0" cellpadding="5" cellspacing="0" align="center">

    <form id="frm" name="frm" action="http://app1/submitProxy.php"
        method="POST" enctype="multipart/form-data">
        <tr>
            <th colspan="2" bgcolor="#004276"><font color="white">
                    Submit a File 
            </th>
        </tr>
        <tr>
            <td>File:</td>
            <td><input name="upfile" type="file" value="">
            </td>
        </tr>
        <input type="hidden" name="email" readonly="readonly"
            value="<%=user.getUserName()%>" /> <input type="hidden"
            name="reanalyze" value="true" />
        <tr>
            <td>Case or Reference Number:</td>
            <td><input type="text" name="caseno" value="${caseno}" /></td>
        </tr>
<%--            <tr>
            <td>Date acquired:</td>
            <td><input type="text" name="acq" id="acq" readonly="readonly"
                value="${document.frm.acq}" /><strong><a href="#"
                    onclick="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;"
                    title="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;"
                    name="anchor1" id="anchor1"><font face="Helvetica,sans-serif">
                            SELECT</font> </a> </strong></td>
        </tr>
        <tr>
            <td>Type of system acquired from:</td>
            <td><input type="text" name="systemAcquired"
                value="${systemAcquired}" /></td>
        </tr> --%>
        <tr>
            <td>Obtained via:</td>
            <td></td>
        </tr>
        <tr>
            <td><dd>Search Warrant:</dd></td>
            <td><input type="checkbox" name="searchWarrant"
                onclick="showhidefield()" value="Y">
            </td>
        </tr>
<div id='hideablearea' style='display: none;'>
    <tr>
            <td>Search Warrant Number:</td>
            <td><input name="searchWarrantNumber" type="text"
                value="${searchWarrantNumber}" /> <br />
            </td>
        </tr>
        <tr>
            <td>Jurisdiction:</td>
            <td><input name="jurisdiction" type="text"
                value="${jurisdiction}" /> <br />
            </td>
        </tr>
        </div>
    <tr>
        <td><dd>Grand Jury:</dd></td>
        <td><input type="checkbox" name="grandJury" value="Y"
            onclick="checkGrandJury()">
        </td>
    </tr>
    <tr>
        <td><dd>Found in the wild:</dd>
        </td>
        <td><input type="checkbox" name="foundInTheWild" value="Y"
            onclick="checkFoundInTheWild()">
        </td>
    </tr>
    <tr>
        <td><dd>Email:</dd></td>
        <td><input type="checkbox" name="obtainedEmail" value="Y"
            onclick="checkObtainedEmail()">
        </td>
    </tr>
    <tr>
        <td><dd>Other:</dd></td>
        <td><input type="checkbox" name="obtainedOther" value="Y"
            onclick="checkObtainedOther()">
        </td>
    </tr>
    <tr>
        <td>Environment:</td>
        <td><select name="sandboxes[]" size="1">
                <option value="00-0C-29-CF-B8-A6">VMSB1 - Windows 7</option>
                <option value="00-0C-29-0A-AB-9A">VMSB2 - Windows XP</option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Comments:</td>
        <td><textarea name="notes">Add comments here...</textarea><br>

        </td>
    </tr>
    <td colspan="2">
        <center>
            <input type="submit" name="button" value="Submit"
                onclick="onSubmit()" />
        </center>
    </td>
    </form>
</table>
</div>

Ответ №1:

DIV между TRS является недопустимым HTML. Поместите «display: none» на сам TR.

       </tr>
<div id='hideablearea' style='display: none;'>   <----- invalid
    <tr>

Ответ №2:

Ага, вы сломали таблицу: вы вставили тег ‘div’ в две таблицы tr, что не является допустимым html.

Я предлагаю создать две отдельные таблицы и скрыть 2-ю. Чтобы убедиться, что они совпадают с, используйте атрибут «width=» в тегах table и td.

Или, в качестве другого подхода, используйте тег «style=’display:none;'» для каждого, который вы хотите скрыть, и переключайте их с помощью идентификатора класса, например, так:

 <tr class="firstHidden" style="display:none;"> .....</tr>

С правильной библиотекой JS (например, jQuery) включить их все сразу очень просто:

 $('.firstHidden').show();

Ответ №3:

Все, что вам нужно сделать, это поместить свои id='hideablearea' style='display: none;' в строки, которые вы пытаетесь скрыть, — о, и удалить divs

1. вы не можете присвоить нескольким элементам один и тот же идентификатор, он должен отображаться / скрываться на основе класса.

2. следовательно, я говорю удалить divs… Но вы можете присвоить нескольким элементам один и тот же идентификатор, просто Javascript это не нравится. HTML обрабатывает их так же, как классы.

Ответ №4:

вы не можете поместить строки таблицы внутри div подобным образом. Было бы лучше разделить ваш код на две таблицы и скрыть вторую.

 <div id="submit">
<form id="frm" name="frm" action="http://app1/submitProxy.php"
        method="POST" enctype="multipart/form-data">
<table
    style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
    ; border="0" cellpadding="5" cellspacing="0" align="center">


        <tr>
            <th colspan="2" bgcolor="#004276"><font color="white">
                    Submit a File 
            </th>
        </tr>
        <tr>
            <td>File:</td>
            <td><input name="upfile" type="file" value="">
            </td>
        </tr>
        <input type="hidden" name="email" readonly="readonly"
            value="<%=user.getUserName()%>" /> <input type="hidden"
            name="reanalyze" value="true" />
        <tr>
            <td>Case or Reference Number:</td>
            <td><input type="text" name="caseno" value="${caseno}" /></td>
        </tr>
<%--            <tr>
            <td>Date acquired:</td>
            <td><input type="text" name="acq" id="acq" readonly="readonly"
                value="${document.frm.acq}" /><strong><a href="#"
                    onclick="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;"
                    title="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;"
                    name="anchor1" id="anchor1"><font face="Helvetica,sans-serif">
                            SELECT</font> </a> </strong></td>
        </tr>
        <tr>
            <td>Type of system acquired from:</td>
            <td><input type="text" name="systemAcquired"
                value="${systemAcquired}" /></td>
        </tr> --%>
        <tr>
            <td>Obtained via:</td>
            <td></td>
        </tr>
        <tr>
            <td><dd>Search Warrant:</dd></td>
            <td><input type="checkbox" name="searchWarrant"
                onclick="showhidefield()" value="Y">
            </td>
        </tr>
        </table>
        <table id='hideablearea' style="display: none; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
    ; border="0" cellpadding="5" cellspacing="0" align="center">
    <tr>
            <td>Search Warrant Number:</td>
            <td><input name="searchWarrantNumber" type="text"
                value="${searchWarrantNumber}" /> <br />
            </td>
        </tr>
        <tr>
            <td>Jurisdiction:</td>
            <td><input name="jurisdiction" type="text"
                value="${jurisdiction}" /> <br />
            </td>
        </tr>
        </div>
    <tr>
        <td><dd>Grand Jury:</dd></td>
        <td><input type="checkbox" name="grandJury" value="Y"
            onclick="checkGrandJury()">
        </td>
    </tr>
    <tr>
        <td><dd>Found in the wild:</dd>
        </td>
        <td><input type="checkbox" name="foundInTheWild" value="Y"
            onclick="checkFoundInTheWild()">
        </td>
    </tr>
    <tr>
        <td><dd>Email:</dd></td>
        <td><input type="checkbox" name="obtainedEmail" value="Y"
            onclick="checkObtainedEmail()">
        </td>
    </tr>
    <tr>
        <td><dd>Other:</dd></td>
        <td><input type="checkbox" name="obtainedOther" value="Y"
            onclick="checkObtainedOther()">
        </td>
    </tr>
    <tr>
        <td>Environment:</td>
        <td><select name="sandboxes[]" size="1">
                <option value="00-0C-29-CF-B8-A6">VMSB1 - Windows 7</option>
                <option value="00-0C-29-0A-AB-9A">VMSB2 - Windows XP</option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Comments:</td>
        <td><textarea name="notes">Add comments here...</textarea><br>

        </td>
    </tr>
    <td colspan="2">
        <center>
            <input type="submit" name="button" value="Submit"
                onclick="onSubmit()" />
        </center>
    </td>

</table>
</form>

Ответ №5:

Спасибо за помощь. По какой-то причине я не смог использовать ни одну из ваших идей. Но я нашел обходной путь для этого. Я использовал выпадающее меню для выбора опции «получено с помощью». И поскольку мне нужны дополнительные поля только при выборе ордера на обыск, я сделал что-то вроде следующего:

 <jsp:include page="template-header-menu.jsp" />



<script type="text/javascript">

function showFields(num){
    container = document.getElementById('field1GoHere');
    container.innerHTML = '';

    if(num == 1){
         container.innerHTML  = '<td>Search Warrant Number:</td><td><input name="searchWarrantNumber" type="text" value="${searchWarrantNumber}" /></td>';
    }
    container = document.getElementById('field2GoHere');
    container.innerHTML = '';

    if(num == 1){
         container.innerHTML  = '<td>Jurisdiction:</td><td><input name="jurisdiction" type="text" value="${jurisdiction}" /></td>';
    }

}

.
.
.
.
.

</script>

<div id="submit">
<table
    style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
    ; border="0" cellpadding="5" cellspacing="0" align="center" width=450>

    <form id="frm" name="frm" action="http://app1/submitProxy.php"
        method="POST" enctype="multipart/form-data">
.
.
.
.
.
.
.           <tr>
            <td width=450><font face="Helvetica,sans-serif">Obtained
                    via:* </font>
            </td>
            <td><select onchange="showFields(this.options[this.selectedIndex].value)">
                 <option value="0">Choose:</option>
                <option value="1">Search Warrant</option>
                <option value="2">Grand Jury</option>
                <option value="3">Found in the wild</option>
                <option value="4">Email</option>
                <option value="5">Other</option></select>
            </td>
        </tr>
        <tr id="field1GoHere"></tr>
        <tr id="field2GoHere"></tr>

    <tr>
    <td colspan="2">
        <center>
            <input type="submit" name="button" value="Submit"
                onclick="onSubmit()" />
        </center></td>
    </form>
</table>
</div>
<jsp:include page="template-bottom.jsp" />

Таким образом, при выборе выпадающего меню отображаются параметры, которые я хотел скрыть, и мне вообще не нужно было использовать «display: none».